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

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

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

何か案は？

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

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

またはバッククォート付きの文字列テンプレートバージョン：

className={`wrapper searchDiv ${this.state.something}`}

もちろんどちらのタイプも単なるJavaScriptですが、最初のパターンは従来のタイプです。

とにかく、JSXでは、中かっこで囲まれたものはすべてJavaScriptとして実行されるので、基本的にはそこで好きなことを実行できます。ただし、JSX文字列と中かっこを組み合わせることは、属性の必須条件です。

プロジェクトの成長に応じて追加する必要がある動的クラスの数によっては、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が再レンダリングをトリガーするため、動的クラス名は自然に処理され、コンポーネントの状態で最新に保たれます。

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

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

これが動的classNameの最適なオプションです。JavaScriptで行うように、いくつかの連結を行ってください。

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

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

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

フックを使用してこれを試してください：

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

これをclassName属性に追加します。

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

クラスを追加するには：

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

クラスを削除するには：

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

この 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})} />

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

このソリューションは、React SPFxで試行およびテストされています。

また、インポートステートメントを追加します：

import { css } from 'office-ui-fabric-react/lib/Utilities';