Question

我有一个使用reactstrap的导航栏并希望合并react-router。尝试失败后，我在这里找到了解决方案。

但是我不懂语法：

我有来自React-Router的<NavLink> 和来自Reactstrap的导航栏。

而不是将Reactstrap包装在React-Router中（它会发出警告）：

 <NavLink to="/">
   <NavbarBrand className="mx-auto" to="/" tag={ NavLink }>
      My Site
   </NavbarBrand>
 </NavLink>

这是语法：

   <NavbarBrand className="mx-auto" to="/" tag={ NavLink }>
      My Site
   </NavbarBrand>

标记属性是什么？它有什么作用？

全部谢谢！

Answer 1

当您呈现NavbarBrand组件时，您可以选择将单个链接呈现为默认a标记（HTMLAnchorElement），或者您可以提供自己的自定义组件来呈现导航项。

在这种情况下，将NavLink作为标记传递很方便，以便使用NavLink呈现导航项目。这就是你需要的。

考虑尊重source code for NavbarBrand，你会在渲染方法中看到这一点：

return (
  <Tag {...attributes} className={classes} />
);

因此，如果您未将tag道具传递给NavbarBrand，那么Tag以上就会a tag。

Answer 2

文档对此并不十分清楚，但所有内容都可以通过查看the source来揭示：

retData

const NavbarBrand = (props) => { const { className, cssModule, tag: Tag, ...attributes } = props; const classes = mapToCssModules(classNames( className, 'navbar-brand' ), cssModule); return ( <Tag {...attributes} className={classes} /> ); };实际上只是实例化你给它的任何标签/组件，并应用适当的样式类，并将其余的道具传递给它。

Answer 3

我查看了文档，但没有说明tag的作用，但PropTypes验证它是string还是function

我的推理based on examples就是这样：

  <Breadcrumb tag="nav">
    <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
    <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
    <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
    <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
  </Breadcrumb>

它接受要用作包装器的HTML标记或React组件的名称。

Reactstrap中的tag属性有什么作用？

3 个答案: