React 警告：不能给函数组件提供 refs

Question

我有一个用图标和文本呈现 Material UI MenuItem 的组件：

export default class ProjectMenuItem extends Component {
  render() {
    return (
      <MenuItem onClick={this.props.onClick}>
        <ListItemIcon>{this.props.iconComponent}</ListItemIcon>
        <ListItemText primary={this.props.text} />
      </MenuItem>
    );
  }
}

这很好用。 我很难理解的是为什么我会收到 警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。 如果我将此组件更改为功能组件：

export const ProjectMenuItem = ({ onClick, iconComponent, text }) => {
  return (
    <MenuItem onClick={onClick}>
      <ListItemIcon>{iconComponent}</ListItemIcon>
      <ListItemText primary={text} />
    </MenuItem>
  );
};

父组件：

      <StyledMenu
        id='customized-menu'
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}>
        {projectMenuItens.map((menuItem, i) => (
          <ProjectMenuItem
            key={i}
            onClick={menuItem.onClick}
            text={menuItem.text}
            iconComponent={menuItem.iconComponent}
          />
        ))}
      </StyledMenu>

完整的警告是：

警告：函数组件不能被赋予 refs。尝试访问 这个裁判会失败。你的意思是使用 React.forwardRef() 吗？检查ForwardRef(Menu)的渲染方法。

Answer 1

StyledMenu 组件尝试为您的ProjectMenuItem 组件分配一个引用。 Refs 不能用于函数组件，因为它们没有实例。您只能在类组件或 DOM 元素上使用它们。

如果你想让ProjectMenuItem 成为一个函数组件，请使用react 的React.forwardRef 实用程序：

export const ProjectMenuItem = React.forwardRef(({onClick, iconComponent, text}, ref) => (
    <MenuItem onClick={onClick} ref={ref}>
      <ListItemIcon>{iconComponent}</ListItemIcon>
      <ListItemText primary={text} />
    </MenuItem>
));

您可以在the official react docs 中阅读更多关于参考的信息。