reactjs - 如何将 MenuItem 用作 NavLink？

Question

我正在尝试使用菜单列表来浏览我的应用程序。尽管应用程序和路由运行良好，但我使用这段代码在控制台中收到了一些警告:

{props.itemList.map((item, index) =>(
        <div key={index}>
          <MenuItem component={NavLink} to={item.to} onClick= 
              {handleClose} activeClassName={classes.topNavLinkActive} 
              className={classes.topNavLink}>
            {item.name}
            <Icon className={classes.navIcon}>{item.icon}</Icon>
          </MenuItem>
        </div>
      ))}

我收到的警告是:警告: Prop 类型失败:提供给 ForwardRef(ButtonBase) 的 Prop component 无效。需要一个可以包含 ref 的元素类型。您是不是不小心提供了一个简单的功能组件？

index.js:1375 警告:函数组件不能被赋予 refs。尝试访问此 ref 将失败。您是想使用 React.forwardRef() 吗？

谁能解释一下为什么这里需要前向引用？

Answer 1

错误似乎与滥用 component 属性有关。文档说:

The component used for the root node. Either a string to use a DOM element or a component.

根据 MenuItem API , component 属性属于 elementType 类型。类型定义文件将显示它正在实现 JSX.IntrinsicElements 接口(interface)(描述标准 HTML 标签)。

NavLink 元素是一个 React 组件。尝试提供标准的 html 标签名称(string)或实际的 DOM 节点引用。