将自定义类名添加到 <NavItem>

Question

我正在使用 react-bootstrap 并想在标签上添加一个自定义的类名。我遵循了这个 link: https://react-bootstrap.github.io/components.html，但它没有提供属性添加额外的类名。以下是可用于此标记的所有属性。有什么办法可以做到这一点吗？

Answer 1

此处并未列出所有属性，您应该可以直接在 <NavItem> 上使用 className。

如果您查看 react-bootstrap 的 NavItem.js 的（片段）源代码，它看起来像这样：

return _react2['default'].createElement(
  'li',
  {
    role: 'presentation',
    className: (0, _classnames2['default'])(className, { active: active, disabled: disabled }),
    style: style
  },
  _react2['default'].createElement(_SafeAnchor2['default'], (0, _extends3['default'])({}, props, {
    disabled: disabled,
    onClick: (0, _createChainedFunction2['default'])(onClick, this.handleClick)
  }))
);

如您所见，它使用属性 role、style 和 className 创建了一个新的 <li> 元素。 disabled 和 onClick 道具被传递给 <a> 标签，它是上述 <li> 元素的子元素。

所以只需使用：

<NavItem className="my-class" active={true}>Example</NavItem>

这将呈现：

<li role="presentation" class="my-class active">
  <a role="button" href="#">Example</a>
</li>

将自定义类名添加到 <NavItem>

Adding custom className to <NavItem>

reactjs

react-bootstrap