React で複数のクラス名を使用する

複雑なアプリケーションを開発する場合、複数のクラスを持つ HTML 要素があることは珍しくありません。HTML と CSS に精通している場合は、複数のクラスを設定するための構文に精通している可能性があります。この記事では、React でこれを行うための複数の異なる方法を見ていきます。

React の複数のクラス名

ほとんどの React 開発者は、単純なコンポーネント定義を作成するための特別な構文である JSX を使用します。その構文は HTML に非常に似ているため、ほとんどの React 開発者に好まれています。クラスの設定に関係するいくつかの本質的な違いがあります。

HTML では、おそらく class 属性を使用してクラスを設定することに慣れています。React コンポーネントはクラスのインスタンスとして定義できるため、Class は予約語です。したがって、開発者は代わりに className 属性を使用する必要があります。

JSX では、className 属性を文字列と同じに設定する必要があります。複数のクラスを持つ単純な定義は次のようになります。

<h1 className="classOne classTwo">Hi! Try edit me</h1>

または、className 属性を文字列を返す JavaScript 式と同じに設定することもできます。式が JavaScript コードとして正しく解釈されるようにするには、式を中括弧で囲む必要があります。例を見てみましょう：

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

この例では、通常の文字列と変数に含まれる文字列値を追加します。式が評価されると、className 属性は'classOne white'文字列と等しくなります。

+ 演算子を .concat() メソッドに置き換えることで、式を読みやすくすることができます。このメソッドは、2つの文字列を 1つに結合します。

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React.join() メソッド

この標準の JavaScript メソッドは、文字列値の配列を複数の className 値に変換するのに役立ちます。これは JavaScript メソッドであるため、JSX では式全体を中括弧の間に配置する必要があります。

デフォルトでは、結合された文字列値はコンマで区切られます。ただし、className 値の有効なリストを作成するには、それらを 1つのスペースで区切る必要があります。幸い、メソッドの引数として単一のスペース文字列' 'を渡すことで、区切り文字を指定できます。次に例を示します。

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

playcode の styles.css ファイルで、次の 3つのクラスを定義しました。

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

中括弧内のコードが実行されると、3つのクラスすべてが適用されていることがわかります。

ソースコードを調べて、クラスが <p> 要素に適用されていることを確認することもできます。

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

React のカスタム関数

ES6 では、配列分解構文を使用して、className 値として使用できるフォーマットされた文字列を返すエレガントなカスタム関数を作成できます。

コードを見てみましょう：

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

この関数は、引数を配列項目として扱い、.join() メソッドを使用して、className 値のフォーマットされたリストを返します。

この関数を使用するときは、必要な数の文字列値を渡すことができます。

React の条件付き className

className 値を条件付きで適用すると、ユーザー入力に基づいて要素の外観を変更するのに役立ちます。たとえば、アプリケーションに暗いテーマと明るいテーマがある場合、その背景も明るい色から暗い色に切り替える必要があります。コード例は次のとおりです。

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

lightBackground 変数には、darkTheme 状態プロパティ値に基づいて 2つの文字列のいずれかが割り当てられます。classNameGenerator("") 関数を呼び出すことに加えて、+ 演算子を使用して変数の条件値も含めます。

より良いデモンストレーションのために、playcode アプリケーションには、darkTheme プロパティの boolean 値を切り替えるためのボタンが含まれています。