ReactJS のトグル クラス

今日は、コード例を使用して、ReactJS でクラスを切り替える方法を学習します。

ReactJS のトグル クラス

React は仮想 DOM のアイデアを使用して DOM 要素を更新します。 条件ステートメントを使用して要素のクラス プロパティを変更し、ユーザーの選択に従ってクラスをレンダリングできます。

条件 (三項) 演算子は、JavaScript で 3つのオペランドを受け入れる唯一の演算子です。 この演算子は通常、if...else 式を置き換えるために使用されます。

3つのオペランドは次のとおりです。

1. 必要な条件の後に疑問符 (?) が続きます。
2. 条件が true の後にコロン (:) が続く場合、式が実行されます。
3. この式は、条件が false の場合に実行されます。

構文：

condition ? expressionIfTrue : expressionIfFalse

機能コンポーネント内での条件ステートメントの使用は、以下の例で示されています。 クラス コンポーネントは、同様の戦略を利用できます。

const [className, setClassName] = useState('blue')
return (
    <Fragment><p className = {className ? className : 'blue'}>Hello world!
    </p>
      <button onClick={() => setClassName(null)}>Change to Default</button>
    <button onClick = {() => setClassName('red')}>Change to Red<
        /button>
      <button onClick={() => setClassName('yellow')}>Change to Yellow</button>
    <button onClick = {() => setClassName('green')}>Change to
        Green</button>
    </Fragment>)

上記の例では、className 変数を定義しました。 ユーザーがそれを Red に更新すると、値は Red に設定され、ユーザーがそれを Default に更新すると、クラス Red が削除されます。

className が指定されている場合は、そのクラスを使用します。 それ以外の場合は、blue をデフォルト クラスとして使用します。 多数のクラスがあり、何も存在しない場合は default クラスを使用したい場合に便利です。

上記のコードを React.js と互換性のある Replit (デモ はこちら) で実行します。 次の結果が表示されます。

出力：