ReactでHTMLタグに付与する属性を動的に切り替える方法

ReactでHTMLタグに付与する属性を動的に切り替える方法

ReactでHTMLタグに付与する属性を動的に切り替える方法について、TypeScriptを使用した例を示します。
この例では、ボタンをクリックするたびに、div要素のクラス名を切り替えるシンプルなコンポーネントを作成します。

TypeScriptのコード例

まず、必要なライブラリをインストールしていない場合でも、この例では特に追加のライブラリをインストールする必要はありません。
標準のReactとTypeScriptのみで実現できます。

import React, { useState } from 'react';
import styles from './MyComponent.module.scss';

const MyComponent: React.FC = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleClass = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <div className={isActive ? styles.active : styles.inactive}>
        このdivのクラス名は動的に切り替えられます。
      </div>
      <button onClick={toggleClass}>
        クラス名を切り替える
      </button>
    </div>
  );
};

export default MyComponent;

MyComponent.module.scssの例

.active {
  background-color: green;
  color: white;
}

.inactive {
  background-color: red;
  color: black;
}

説明

1. 状態管理
useStateフックを使用して、isActiveという状態を管理しています。
この状態がtrueの場合、div要素にstyles.activeクラスが適用され、falseの場合はstyles.inactiveクラスが適用されます。
2. イベントハンドラ
ボタンがクリックされたときに、toggleClass関数が呼び出され、isActiveの値が反転します。
3. 動的クラス名の設定
div要素のクラス名は、isActiveの値に応じて動的に設定されます。

これにより、ボタンをクリックするたびに、divのクラス名がactiveとinactiveの間で切り替わります。

このコードは、ReactとTypeScriptを使用して、HTMLタグに付与する属性を動的に切り替える方法の基本的な例です。