Reactstrap 中的标签属性有什么作用？

Question

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

但是我不明白语法：

我有一个<NavLink>来自 React-Router 和一个来自 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

文档对此并不太清楚，但所有内容都可以通过查看源代码来揭示：

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

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

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

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