forwardRef 的详解及使用

一、 介绍

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

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

二、案例效果

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

三、代码案例

父组件

const container = useRef(null);

// 子组件

子组件

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-deps

  return (
    

      {
      menuDataList.map((menuItem) => (
        menuItem.isEnabled ? (
          
{menuItem.menuContent}
        ) : (
          
{menuItem.menuContent}
        )
      ))
    }
    
  );
});
ContextMenu.propTypes = {
  visible: PropTypes.bool.isRequired,
  menuDataList: PropTypes.arrayOf(PropTypes.object).isRequired,
  clickX: PropTypes.number.isRequired,
  clickY: PropTypes.number.isRequired,
};

export default ContextMenu;