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

【问题标题】：What does the tag attribute in Reactstrap do?Reactstrap 中的 tag 属性有什么作用？
【发布时间】：2018-09-08 14:40:44
【问题描述】：

我有一个使用 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>

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

谢谢大家！

【问题讨论】：

这是 NavBarBrand 采用的道具。你检查过文档/源代码吗？

标签： reactjs reactstrap

【解决方案1】：

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

const NavbarBrand = (props) => {
  const {
    className,
    cssModule,
    tag: Tag,
    ...attributes
  } = props;

  const classes = mapToCssModules(classNames(
    className,
    'navbar-brand'
  ), cssModule);

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

NavbarBrand 实际上只是实例化了你给它的任何标签/组件，并应用了适当的样式类，并将其余的道具传递给它。

【讨论】：

【解决方案2】：

我查看了文档，没有说明 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 组件的名称以用作包装器。

【讨论】：

【解决方案3】：

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

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

看着尊敬的source code for NavbarBrand，你会在渲染方法中看到这个：

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

因此，如果您不将 tag 属性传递给 NavbarBrand，那么上面的 Tag 将是 a tag。

【讨论】：

所以这不是反应？它只是 Reactstrap 中导航栏组件的一个道具？
@DM 是的，这只是通常的自定义道具。