[英]Getting rid of browser warning when using Grommet Anchor as Link from react-router-dom
Grommet Anchor 'tag' property type expects 'string', so using Link from react-router-dom creates a console warning. 索环锚的“标记”属性类型期望为“字符串”,因此使用来自react-router-dom的链接会创建控制台警告。 Except the warning, everything works fine. 除了警告,一切正常。
Warning: Failed prop type: Invalid prop
tag
of typefunction
supplied toAnchor
, expectedstring
. 警告:prop类型失败:提供给Anchor
的typefunction
无效proptag
(预期string
。
Code: 码:
import {Link} from 'react-router-dom';
...
<Anchor key={route.key} tag={Link} to={route.path} children={route.mainMenuLabel}/>
The documentation says: 该文件说:
tag {string} The DOM tag to use for the element. tag {string}用于元素的DOM标签。 The default is . 默认值为。 This should be used in conjunction with components like Link from React Router. 这应该与React Router的Link等组件一起使用。 In this case, Link controls the navigation while Anchor controls the styling. 在这种情况下,“链接”控制导航,而“锚点”控制样式。 The default is a. 默认值为a。
"grommet-css": "^1.6.0" “ grommet-css”:“ ^ 1.6.0”
What am I doing wrong and is it possible to get rid of the warning? 我在做什么错,有可能摆脱警告吗?
If you want to use the path
functionality of react router and not render the Link component itself, then it can be done like this. 如果您想使用React Router的path
功能而不是渲染Link组件本身,则可以这样做。
import Anchor from 'grommet/components/Anchor';
<Anchor icon={<Edit />}
label='Label'
path='/' // Give the react-router path here.
/>
If you have to absolutely render the Link
component, then 如果必须绝对渲染Link
组件,则
<Link to='/'>
<Anchor tag="span">Home</Anchor>
</Link>
Tag expects a string and cannot be used to render the Link. 标记需要一个字符串,不能用于呈现链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.