JSXと通常のclassNameの両方を一緒に使用する

Question

CSSスタイルはJSX形式である必要がありますが、スタイルに合わせてスタイルクラスを使用する必要があります。これらをどのように組み合わせるのですか？ 私は明らかに、大文字と呼ばれる変数を探し、エラーが出て

<span className="uppercase {statusColor}"> 

どちらも彼らの仕事どちら

<span className={statusColor uppercase}> 

口座に最後のクラスを取る

<span className={statusColor} className="uppercase"> 

を試してみました

以下は、私のコードのダミーダウンバージョンです。これを行う正しい方法は何ですか？

const Component = React.createClass({ 
    return { 
     completed: false 
    } 
    }, 
    render() { 
    let statusColor; 
    this.state.completed === true ? statusColor = "green" : statusColor = "red"; 
    return (
     <div className="status-banner"> 
     <span className="kata-text-status">Status: <span className={statusColor} className="uppercase">{this.state.completed.toString()}</span></span> 
     </div> 
    ) 
    } 
}) 

Answer 1

これを試してみてください：

<span className={`uppercase ${statusColor}`}> 

これはES6テンプレート文字列（`uppercase ${statusColor}`）を使用し、${...}でstatusColorを補間します。

Answer 2

括弧{}は通常のJSに変換されます。したがって、連結するのに+を使用することができます。

<span className={"uppercase " + statusColor}> 

Answer 3

これはいくつかの方法で実行できます。

まず、あなたは、複数の文字列変数をCONCATとダイナミックな文字列

<span className={"uppercase " + statusColor}> 

それとも、NPMモジュールclassnamesを使用することができますを生成するために+を使用することができます。

Answer 4

<span className={'uppercase' + ' ' + statusColor}>