如何将类名/id 添加到 React-Bootstrap 组件？答案

【问题标题】：How to add a classname/id to React-Bootstrap Component?如何将类名/id 添加到 React-Bootstrap 组件？
【发布时间】：2016-11-24 00:12:54
【问题描述】：

假设我们使用 React-Bootstrap 中的 Row... 我们如何在不使用包装器或内部元素的情况下对其进行样式设置：

<Row>
  <div className='some-style'>
   ...
</Row>

理想情况下，我们可以这样做：

<Row className='some-style'> 
  ...
</Row>

但这不起作用，我认为这是因为React-Bootstrap 不知道className 在<Row> 组件中的位置（它应该只设置具有行样式的<div>）。

【问题讨论】：

【解决方案1】：

如果您查看组件的code，您会发现它使用传递给它的className 属性与row 类组合以获得结果类集（<Row className="aaa bbb"... 有效）。此外，如果您提供 id 之类的 <Row id="444" ... 属性，它实际上会为元素设置 id 属性。

【讨论】：

【解决方案2】：

第一种方法是使用道具

<Row id = "someRandomID">

其中，在定义中，你可以去

const Row = props  => {
 <div id = {props.id}> something </div>
}

类也可以这样做，在上面的示例中将 id 替换为 className。

你不妨使用react-html-id，这是一个 npm 包。这是一个 npm 包，它允许您为组件使用唯一的 html ID，而不依赖于其他库。

和平。

【讨论】：