6

I have a navbar using reactstrap and wanted to incorporate react-router. After a failed attempt I have found the solution here.

However I don't understand the syntax:

I have a <NavLink> from React-Router and a navbar from Reactstrap.

Instead of wrapping the Reactstrap's inside React-Router's (Which throws a warning):

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

This is the syntax:

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

What is the tag attribute? What does it do?

Thanks all!

4

3 回答 3

3

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

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

仔细查看源代码，NavbarBrand您会在 render 方法中看到这一点：

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

因此，如果您不将tagprop 传递给NavbarBrandthen 上面Tag将是atag。

于 2018-03-29T15:18:13.320 回答
0

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

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

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

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

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

于 2018-03-29T15:16:27.397 回答
0

我已经检查了文档并且没有描述什么tag，但是PropTypes验证它是 astring还是 afunction

我基于示例的推理是这样的：

  <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 组件的名称以用作包装器。

于 2018-03-29T15:17:55.817 回答