Reactjs 反应警告：不能为功能组件提供参考

我有一个组件，用于呈现带有图标和文本的材质UI菜单项：

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

导出默认类ProjectMenuItem扩展组件{
render（）{
返回(
{this.props.iconComponent}
);
}
}

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

export const ProjectMenuItem=（{onClick，iconComponent，text}）=>{
返回(
{iconComponent}
);
};

父组件：

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

{projectMenuItems.map（（menuItem，i）=>(
))}

全部警告如下：

警告：不能为功能组件提供参考。试图访问 此ref将失败。您是想使用React.forwardRef（）吗？检查

ForwardRef（菜单）

的渲染方法

---

StyledMenu

组件尝试为

ProjectMenuItem

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

如果希望

ProjectMenuItem

成为功能组件，请使用react的

react.forwardRef

实用程序：

export const ProjectMenuItem=React.forwardRef（{onClick，iconComponent，text}，ref）=>(
{iconComponent}
));

---

您可以在中阅读有关参考的更多信息。

检查此项。它可能会解决您的问题。如果一切正常，忽略此错误会导致问题吗？（可能相关：）@kca上面的消息显示“警告”而不是“错误”，并且是由React本身生成的，因此关于React，如果忽略此警告，您将不会得到任何运行时错误。但是，将受影响的功能组件作为子组件使用的其他组件可能依赖于它接受ref，因此请确保阅读文档并检查源代码。

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