如何在React-Bootstrap组件中添加classname/id？

Question

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

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

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

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

但这不起作用,我认为这是因为React-Bootstrap不知道className在Row组件中的位置(它应该只设置具有我想的行样式的div)

Answer 1

如果你看一下组件的代码,你可以看到它使用className传递给它的prop来与row类结合以获得结果的类集(<Row className="aaa bbb"...工作).另外,如果你提供id类似<Row id="444" ...它将实际设置id元素的属性.

Answer 2

第一种方法是使用道具

<Row id = "someRandomID">

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

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

对 class 也可以这样做，在上面的例子中用className替换id。

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

参考：react-html-id

和平。