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

Posted 2023-02-22

【中文标题】如何将类名/id 添加到 React-Bootstrap 组件？

【英文标题】：How to add a classname/id to React-Bootstrap Component?

【发布时间】：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 属性。

【讨论】：

出于某种原因，我认为 Row 和 Col 不能这样设计。我认为我在其他组件中遇到过这个问题，如果我将来遇到它会更新

【参考方案2】：

第一种方法是使用道具

<Row id = "someRandomID">

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

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

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

---

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

参考：react-html-id

---

和平。