Что делает атрибут тега в Reactstrap?

У меня есть навигационная панель, использующая 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>

Что такое атрибут тег? Что оно делает?

Спасибо всем!


reactjs reactstrap
person Poogy    schedule 29.03.2018    source источник
comment
Это реквизит, который использует NavBarBrand. Вы проверяли документацию/исходный код?   -  person dfsq    schedule 29.03.2018

Ответы (3)


arrow_upward
3
arrow_downward

При рендеринге компонента NavbarBrand у вас есть возможность отображать отдельные ссылки как тег a по умолчанию (HTMLAnchorElement), или вы можете предоставить свой собственный компонент для рендеринга элементов навигации.

В этом случае удобно передать NavLink в качестве тега, чтобы элементы навигации отображались с NavLink. Это то, что вам нужно.

Глядя на уважительный исходный код для NavbarBrand, вы видите это в методе рендеринга:

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

Поэтому, если вы не передадите tag в NavbarBrand, то над Tag будет a тег.

person dfsq    schedule 29.03.2018
comment
Так это не реакция? Это просто поддержка компонентов навигационной панели в Reactstrap? - person D M; 29.03.2018
comment
@DM Да, это обычная нестандартная опора. - person dfsq; 29.03.2018

arrow_upward
0
arrow_downward

Документы не очень ясны по этому поводу, но все можно узнать, посмотрев на источник:

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

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

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

NavbarBrand фактически просто создает экземпляр любого тега/компонента, который вы ему даете, с применением соответствующих классов стиля и передает ему остальные реквизиты.

person Joe Clay    schedule 29.03.2018

arrow_upward
0
arrow_downward

Я проверил документацию, и там не было описания того, что делает tag, но PropTypes проверьте, является ли это string или function

Мои рассуждения основаны на примерах:

  <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 для использования в качестве оболочки.

person Tomasz Mularczyk    schedule 29.03.2018