forwardRef 的详解及使用

一、 介绍

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

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

二、案例效果

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

三、代码案例

父组件

const container = useRef(null);

// 子组件

<ContextMenu
    ref={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-deps

  return (
    <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;