我正在尝试使用菜单列表来浏览我的应用程序。尽管应用程序和路由运行良好,但我使用这段代码在控制台中收到了一些警告:
{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() 吗?
谁能解释一下为什么这里需要前向引用?
最佳答案
错误似乎与滥用 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 节点引用。
https://stackoverflow.com/questions/56991715/
相关文章:
assembly - 如何在 GDB 控制台中设置 "info registers"中的变量 rip
django - 如何解决“"django.core.exceptions.AppRegistryN
node.js - 事件.js :180 throw er;//Unhandled 'error'
react-native - 位于 "node_modules/web3-eth-accounts/
python - 为什么 GridSearchCV 方法的精度低于标准方法?
angular - 上传 PUT 请求由 Angular ServiceWorker 发送两次
amazon-web-services - 为什么 Amazon Athena 会抛出 "Acces
laravel - 安装后如何使用 npm 包 (chart.js)?