bsClassとclassNameをreact-bootstrapで使用する点の違いは何ですか？

Question

私は反応が新しく、bsClassとclassNameの間の概念を理解できませんでした。

私は次のように、修正ボタンのスタイルを実装しよう：

私は classNameと bsClassを代用するとき、それは動作しません

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

。

しかし、他の部分には、同じのcustom.cssソースを使用して、私が実装します。

<img src={logo} alt="logo" className="app-logo" />、それが動作します。

Answer 1

JSX属性classNameは、HTML classに相当します。それはButtonに渡されているpropある

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

に考えられているbsClassあたりのようにJSX

の下

<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ドキュメントによってプロパティとして定義されている属性です。

Answer 2

リアクトのclassNameは、CSSの通常のクラスとまったく同じです。

HTML/CSS：

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

は/ JSXに反応：

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

上記のコードスニペットは、まったく同じことを行います。 （classの代わりに）classNameをReactに使用することに固執している唯一の理由は、「class」が既にJavaScriptで予約されているキーワードであるためです。

他の人が述べたように、bsClassは、反応ブートストラップパッケージ内のあらかじめ定義されたクラスです。 BootstrapのCSS版に独自のスタイリングがどのように付属しているかのように、反応起動ストラップも同様です。

Answer 3

実用的な違い。私はbsClassをREACT-Bootstrapがデフォルトとして持っている以外のものに設定しました。あなたはボタンの独自のCSSテーマ設定をしなければなりません。あなたはまだ、デフォルトのテーマを得るが、あなたが今、あなた自身の.css

.xx { 
     magin-bottom: 2px 
}