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

Question

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

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

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

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

但这并不起作用，而且我认为它是因为React-Bootstrap不知道className在Row组件中的位置（它应该只设置具有行＆＃的div的样式） 39;我认为的风格）

Answer 1

如果您查看组件的code，您可以看到它使用传递给它的className道具与row类组合以获得最终的类集（ <Row className="aaa bbb"...可以工作）。另外，如果你提供像id这样的<Row id="444" ...道具，它实际上会为元素设置id属性。

Answer 2

第一种方法是使用道具

<Row id = "someRandomID">

其中，在“定义”中，您只需进入

const Row = props  => {
 div id = {props.id}
}

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

---

您最好使用react-html-id，这是一个npm软件包。 这是一个npm软件包，可让您对组件使用唯一的html ID，而无需依赖于其他库。

参考：react-html-id

---

和平。