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

Question

我是react新手，无法理解bsClass和className的概念

我尝试实现修改后的按钮样式，例如：

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

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

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

<img src={logo} alt="logo" className="app-logo" /> 并且有效。

Answer 1

React 的 className 完全等同于 CSS.

中的常规 classes

HTML/CSS:

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

React/JSX:

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

以上代码片段的作用完全相同。我们坚持在 React 中使用 className（而不是 class）的唯一原因是因为 "class" 已经在 JavaScript.[=16= 中被视为保留关键字]

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

也是如此

Answer 2

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>

它是 prop 被传递给 reactJS 中的 Button 组件，这就是它将用来在组件内部设置 className 的内容，例如

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

所以它是 react-bootstrap 文档定义为属性的属性。

Answer 3

实际差异。我将 bsClass 设置为 REACT-Bootstrap 默认设置以外的其他内容，您必须自己对按钮进行 css 主题设置。

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

.xx {
      magin-bottom: 2px
}

What is the difference of using bsClass and className with react-bootstrap?