forwardRef 的详解及使用

一、介绍

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

转发 refs 到 DOM 组件
在高阶组件中转发 refs

二、案例效果

将父组件的ref 传递给子组件

三、代码案例

父组件

const container = useRef(null);// 子组件<ContextMenuref={container}visible={isSelectList}clickX={clickX}clickY={clickY}menuDataList={menuDataList}/>

子组件

import React, {useState, useEffect, forwardRef,
} from 'react';
import PropTypes from 'prop-types';
import './index.scss';import { getMenuStyle } from '../card/card.service';const ContextMenu = forwardRef(({visible, clickX, clickY, menuDataList,
}, ref) => {const [menuStyle, setMenuStyle] = useState({});useEffect(() => {if (visible) {const { current } = ref;setMenuStyle(getMenuStyle(clickX, clickY, current));} else {setMenuStyle({ visibility: 'hidden' });}}, [visible]);// eslint-disable-line react-hooks/exhaustive-depsreturn (<ul className="chooseList-box" style={menuStyle} ref={ref}>{menuDataList.map((menuItem) => (menuItem.isEnabled ? (<li role="presentation" onClick={menuItem.clickEvent} key={menuItem.menuContent}>{menuItem.menuContent}</li>) : (<li className="disabledLi" key={menuItem.menuContent}>{menuItem.menuContent}</li>)))}</ul>);
});
ContextMenu.propTypes = {visible: PropTypes.bool.isRequired,menuDataList: PropTypes.arrayOf(PropTypes.object).isRequired,clickX: PropTypes.number.isRequired,clickY: PropTypes.number.isRequired,
};export default ContextMenu;

forwardRef 的详解及使用相关推荐

从命令行到IDE，版本管理工具Git详解（远程仓库创建+命令行讲解+IDEA集成使用）
首先,Git已经并不只是GitHub,而是所有基于Git的平台,只要在你的电脑上面下载了Git,你就可以通过Git去管理"基于Git的平台"上的代码,常用的平台有GitHub.Gi ...
JVM年轻代，老年代，永久代详解
秉承不重复造轮子的原则,查看印象笔记分享连接↓↓↓↓ 传送门:JVM年轻代,老年代,永久代详解速读摘要最近被问到了这个问题,解释的不是很清晰,有一些概念略微模糊,在此进行整理和记录,分享给大家.在 ...
docker常用命令详解
docker常用命令详解本文只记录docker命令在大部分情境下的使用,如果想了解每一个选项的细节,请参考官方文档,这里只作为自己以后的备忘记录下来. 根据自己的理解,总的来说分为以下几种: Doc ...
通俗易懂word2vec详解词嵌入-深度学习
https://blog.csdn.net/just_so_so_fnc/article/details/103304995 skip-gram 原理没看完 https://blog.csdn.net ...
深度学习优化函数详解（5）-- Nesterov accelerated gradient (NAG) 优化算法
深度学习优化函数详解系列目录深度学习优化函数详解(0)– 线性回归问题深度学习优化函数详解(1)– Gradient Descent 梯度下降法深度学习优化函数详解(2)– SGD 随机梯度下降 ...
CUDA之nvidia-smi命令详解---gpu
nvidia-smi是用来查看GPU使用情况的.我常用这个命令判断哪几块GPU空闲,但是最近的GPU使用状态让我很困惑,于是把nvidia-smi命令显示的GPU使用表中各个内容的具体含义解释一下. ...
Bert代码详解（一）重点详细
这是bert的pytorch版本(与tensorflow一样的,这个更简单些,这个看懂了,tf也能看懂),地址:https://github.com/huggingface/pytorch-pretr ...
CRF(条件随机场)与Viterbi(维特比)算法原理详解
摘自:https://mp.weixin.qq.com/s/GXbFxlExDtjtQe-OPwfokA https://www.cnblogs.com/zhibei/p/9391014.html C ...
pytorch nn.LSTM()参数详解
输入数据格式: input(seq_len, batch, input_size) h0(num_layers * num_directions, batch, hidden_size) c0(num ...

forwardRef 的详解及使用

一、介绍

二、案例效果

三、代码案例

forwardRef 的详解及使用相关推荐

最新文章

热门文章

forwardRef 的详解及使用

一、 介绍

二、案例效果

三、代码案例

forwardRef 的详解及使用相关推荐

最新文章

热门文章

一、介绍