反应警告：不能为函数组件提供参考

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>
    );
  }
}

这工作正常。我正在努力理解的是为什么我会收到警告：无法为函数组件提供参考。尝试访问此引用将失败。 如果我将此组件更改为功能组件：

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>

完整的警告是：

警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 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>
));

您可以在官方 react 文档中阅读有关 refs 的更多信息。