430

次のように、親コンポーネントから渡されたものに応じて、このボタン グループを条件付きで表示および非表示にしたいと考えています。

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

ただし、 {this.props.showBulkActions ? 「表示」：「非表示」}。私はここで何か悪いことをしていますか?

4

21 に答える 21

739

中括弧は文字列内にあるため、文字列として評価されます。彼らは外にいる必要があるので、これはうまくいくはずです:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

「pull-right」の後のスペースに注意してください。「pull-right show」の代わりに「pull-rightshow」クラスを誤って提供したくはありません。また、括弧が必要です。

于 2015-05-29T15:18:29.243 に答える
116

他の人がコメントしているように、classnamesユーティリティは、ReactJs で条件付き CSS クラス名を処理するために現在推奨されているアプローチです。

あなたの場合、解決策は次のようになります。

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

show補足として、とhiddenクラスの両方を使用しないようにすることをお勧めします。これにより、コードがより単純になります。ほとんどの場合、デフォルトで何かを表示するためにクラスを設定する必要はありません。

2021 年の補遺:パフォーマンスを向上させるために、代わりにclsxを調べることができます。

于 2016-03-01T09:08:08.633 に答える
89

トランスパイラー ( Babelや Traceur など) を使用している場合は、ES6 の新しい「テンプレート文字列」を使用できます。

これは@spitfire109の回答で、それに応じて変更されています：

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>

s-is-shownこのアプローチにより、次のいずれかをレンダリングして、そのようなきちんとしたことを行うことができますs-is-hidden。

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>
于 2016-09-05T13:12:39.543 に答える
12

または npm classnamesを使用します。特にクラスのリストを構築するのに非常に簡単で便利です

于 2017-01-27T13:08:26.920 に答える
12

@spitfire109 のすばらしい答えに費やすと、次のようなことができます。

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

次に、render 関数内で次のようにします。

<div className={this.rootClassNames()}></div>

jsxを短く保ちます

于 2016-05-02T13:53:46.157 に答える
-1

パラメータに基づいて正しいクラスを返す関数 (存在する場合)

  getClass(param){
    let podClass = 'classA'
    switch(param.toLowerCase()){
        case 'B':
            podClass  = 'classB'
            break;
        case 'C':
            podClass  = 'classC'
            break;
    }
    return podClass
}

対応するクラスが適用される div からこの関数を呼び出すだけです。

 <div className={anyOtherClass + this.getClass(param)}

このロジックを使用して、ブートストラップ テーブルの行に正しい色を適用することに成功しました。

于 2020-10-27T08:38:58.223 に答える