reactjs - 使用 Grommet Anchor 作为 react-router-dom 的链接时摆脱浏览器警告

Question

Grommet Anchor 'tag' 属性类型需要 'string'，因此使用 react-router-dom 中的 Link 会产生控制台警告。除了警告，一切正常。

警告：道具类型失败：提供给tag的道具类型无效，应为。functionAnchorstring

代码：

import {Link} from 'react-router-dom';
...
<Anchor key={route.key} tag={Link} to={route.path} children={route.mainMenuLabel}/>

文档说：

tag {string} 用于元素的 DOM 标签。默认值为 . 这应该与 React Router 中的 Link 等组件结合使用。在这种情况下，Link 控制导航，而 Anchor 控制样式。默认值为 a。

“索环-css”：“^1.6.0”

我做错了什么，是否有可能摆脱警告？

score 3 · Accepted Answer

如果你想使用pathreact router 的功能而不是渲染 Link 组件本身，那么可以这样做。

import Anchor from 'grommet/components/Anchor';

<Anchor icon={<Edit />}
  label='Label'
  path='/'   //  Give the react-router path here.
/>

如果您必须绝对渲染Link组件，那么

<Link to='/'>
  <Anchor tag="span">Home</Anchor>
</Link>

标记需要一个字符串，不能用于呈现链接。

1 回答 1