使用react-bootstrap时，bsClass和className有什么区别？

Question

我刚接触React，但是无法理解bsClass和className之间的概念。

我想要实现一个修改后的按钮样式，例如：

<Button bsClass="btn-custom" >自定义按钮</Button>

当我用className替换bsClass时，它不起作用。

但在其他部分中，使用相同的custom.css源代码，我实现了：

<img src={logo} alt="logo" className="app-logo" />，并且它可以正常工作。

- Zuzu Softman

---

请查看 Button 组件的文档。 - zerkms

bsClass是预定义的。它有自己的样式来注入组件。而className需要您定义您的CSS才能工作。 - Rei Dien

好的。谢谢你们两个。现在我理解了这句话的上下文：“组件的基本CSS类和前缀。通常情况下，只需更改bsClass即可为组件提供新的非Bootstrap CSS样式。” - Zuzu Softman

Answer 1

JSX的属性className等同于HTML中的class。因此，下面的JSX

<span className="app-logo">Logo</span>

在HTML中，将等同于以下内容

<span class="app-logo">Logo</span>

根据bsClass的考虑

<Button bsClass="btn-custom" >Custom button</Button>

在ReactJS中，传递给组件的是prop，并且它将使用它来设置组件内部的className，类似于以下代码：

<button className={this.props.bsClass}>{this.props.children}</button>

所以，这是一个由react-bootstrap文档定义为属性的属性。

- Shubham Khatri

---

在我看来，你的示例似乎没有解释为什么<Button>中的className不会像<span>一样传递到<button>作为类。 - Dabrule

@Dabrule，我想我已经解释了Button组件中className是如何设置的。就像在以下代码中所考虑的那样：<Button bsClass="btn-custom" >自定义按钮</Button>它是一个被传递到ReactJS Button组件的prop，这就是它将用于在组件内部设置className的方式。 - Shubham Khatri

Answer 2

React的className与CSS中的常规类完全等价。

HTML/CSS：

<div class='red-text'>
    Foo
</div>

React/JSX：

<div className='red-text'>
    Foo
</div>

上述代码片段执行的是完全相同的操作。React中我们只能使用className（而不是class）的原因是因为“class”在JavaScript中已经被定义为保留关键字。

正如其他人所说，bsClass是react-bootstrap包中预定义的类。就像CSS版本的Bootstrap带有自己的样式一样，react-bootstrap也是如此。

- Denny

Answer 3

一个实际的区别。如果你将bsClass设置为非REACT-Bootstrap默认值，那么你需要自己进行按钮的css主题设计。

通过添加className="xx"，你仍然可以获得默认主题，但现在你可以使用自己的.css文件添加颜色、填充等css样式。

.xx {
      magin-bottom: 2px
}

- Dr.YSG