web-dev-qa-db-ja.com

ReactJSは手動クラス名に動的クラスを追加します

通常のクラスのリストに動的なクラスを追加する必要がありますが、その方法がわからない（私はbabelを使用しています）。

<div className="wrapper searchDiv {this.state.something}">
...
</div>

何か案は？

ありがとう

cssreactjs
102
Mankind1023

これを行うこともできます、通常のJavaScript：

className={'wrapper searchDiv ' + this.state.something}

または文字列テンプレートのバージョン

バッククォート付きのclassName={`wrapper searchDiv ${this.state.something}`}。

どちらのタイプももちろんJavaScriptですが、最初のパターンは伝統的なものです。とにかく、JSXでは、波括弧で囲まれたものはすべてJavaScriptとして実行されるので、基本的には、必要なことは何でもできます。しかし、JSX文字列との中括弧を組み合わせるのは、属性にとって意味がありません。

151
dannyjolie

プロジェクトが大きくなるにつれて追加する必要がある動的クラスの数に応じて、GitHubのJedWatsonによる classnames ユーティリティをチェックする価値があるでしょう。それはあなたがオブジェクトとしてあなたの条件付きクラスを表現することを可能にし、trueと評価されるものを返します。

そのReactのドキュメントから例として：

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

状態が変化するとReactは再レンダリングをトリガーするので、動的クラス名は自然に処理され、コンポーネントの状態に合わせて最新の状態に保たれます。

43
Brad Colthurst

簡単な構文は次のとおりです。

<div className={`wrapper searchDiv ${this.state.something}`}>
28
oligopol

これが動的classNameの最良の選択肢です。Javascriptで行ったように、単に連結してください。

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
10
Saad Mirza
getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>
0
Harshvardhan Singh Baghel

状態条件に応じて表示されるスタイル名が必要な場合は、次の構成を使用することをお勧めします。

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
0
Sergey Gubarev

あなたは この npmパッケージを使うことができます。それはすべてを扱い、変数または関数に基づく静的および動的クラスのためのオプションを持ちます。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
0
Tushar Sharma