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

我是新来的反应，无法把握bsClass和className之间的概念。使用bsClass和className与react-bootstrap有什么区别？

我尝试实施经修改的按钮样式，如：

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

在那里，当我与className替代bsClass不起作用。

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

<img src={logo} alt="logo" className="app-logo" />和它的作品。

检查'按钮文档'组件。 – zerkms

bsClass是预定义的。它有自己的风格注入组件。而className需要你定义你的css才能工作 –

好的。谢谢你们两位。现在我理解了“Base CSS类和组件的前缀”这个句子的上下文，通常应该只改变bsClass为组件提供新的，非Bootstrap，CSS样式“ –

JSX属性className相当于HTML class。所以下面的JSX

按bsClass在

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

是prop正在被传递给Button被认为

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

将是等效于HTML下面

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

这是它将用于设置className在组件内部的东西，比如

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

因此它是由react-bootstrap文档定义为属性的属性。

2017-04-18 06:00:32

React的className完全等同于CSS中的常规类。

HTML/CSS：

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

反应，和/ JSX：

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

上面的代码片段做同样的事情。我们坚持在React中使用className（而不是class）的唯一原因是因为“class”已被作为JavaScript中的保留关键字。

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

2017-04-18 02:56:09

实际区别。我把bsClass设置为REACT-Bootstrap默认的东西以外的其他东西，你必须做你自己的CSS按钮主题。

通过添加的className =“XX”你仍然得到默认的主题，但是您现在可以添加CSS样式颜色，填充等，使用自己的CSS

.xx { 
     magin-bottom: 2px 
}

2017-04-27 16:40:34

回答