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组件分配引用。引用不能用于功能组件，因为它们没有实例。您只能在类组件或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中阅读更多有关裁判的文章。

反应警告：无法为功能组件提供参考

1 个答案: