React 条件付き属性追加

React コンポーネントに条件付きで属性を追加する方法 (日本語)

React では、コンポーネントに条件に基づいて属性を追加することができます。これにより、動的な UI を作成し、ユーザーの入力や状態の変化に合わせてコンポーネントの表示や挙動を調整することができます。

条件演算子 (Conditional Operator)

最もシンプルな方法は、条件演算子 (?:) を使用することです。

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible ? <span className="visible">Visible</span> : null}
    </div>
  );
};

• isVisible が false の場合、span 要素はレンダリングされません。
• isVisible が true の場合、span 要素は className="visible" でレンダリングされます。

論理演算子 (Logical Operator)

論理演算子 && を使用して、条件が true の場合のみ要素をレンダリングすることもできます。

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible && <span className="visible">Visible</span>}
    </div>
  );
};

if ステートメント

より複雑な条件処理が必要な場合は、if ステートメントを使用することもできます。ただし、JSX 内では if ステートメントを直接使用できないため、変数に条件式の結果を格納してから JSX でレンダリングする必要があります。

const MyComponent = () => {
  const isVisible = true;
  let content;

  if (isVisible) {
    content = <span className="visible">Visible</span>;
  }

  return (
    <div>
      {content}
    </div>
  );
};

ternary 演算子

ternary 演算子は、条件演算子のより長い形式です。

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible ? (
        <span className="visible">Visible</span>
      ) : (
        <span className="hidden">Hidden</span>
      )}
    </div>
  );
};

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible ? <span className="visible">Visible</span> : null}
    </div>
  );
};

• 解説
  

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible && <span className="visible">Visible</span>}
    </div>
  );
};

const MyComponent = () => {
  const isVisible = true;
  let content;

  if (isVisible) {
    content = <span className="visible">Visible</span>;
  }

  return (
    <div>
      {content}
    </div>
  );
};

• 解説
  
  • if ステートメントを使用して、条件に基づいて content 変数に値を割り当てます。
  • content を JSX でレンダリングします。

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible ? (
        <span className="visible">Visible</span>
      ) : (
        <span className="hidden">Hidden</span>
      )}
    </div>
  );
};

カスタムフック (Custom Hooks)

複雑な条件処理や再利用可能なロジックが必要な場合は、カスタムフックを使用することができます。

import { useState } from 'react';

function useConditionalAttribute(condition, attribute, value) {
  const [attributes, setAttributes] = useState({});

  useEffect(() => {
    if (condition) {
      setAttributes({ [attribute]: value });
    } else {
      setAttributes({});
    }
  }, [condition, attribute, value]);

  return attributes;
}

const MyComponent = () => {
  const isVisible = true;
  const attributes = useConditionalAttribute(isVisible, 'className', 'visible');

  return (
    <div>
      <span {...attributes}>Visible</span>
    </div>
  );
};

• 解説
  
  • useConditionalAttribute カスタムフックは、条件に基づいて属性を生成します。
  • MyComponent コンポーネントは、カスタムフックを使用して条件に基づいて属性を適用します。

switch ステートメント

複数の条件を評価する必要がある場合は、switch ステートメントを使用することができます。

const MyComponent = () => {
  const condition = 'case2';

  return (
    <div>
      <span className={
        switch (condition) {
          case 'case1':
            return 'class1';
          case 'case2':
            return 'class2';
          default:
            return '';
        }
      }>
        Content
      </span>
    </div>
  );
};

• 解説
  

ライブラリ

条件付き属性の追加を簡略化するためのライブラリも存在します。例えば、classnames ライブラリを使用することができます。

import classNames from 'classnames';

const MyComponent = () => {
  const isVisible = true;

  return (
    <div>
      <span className={classNames('base-class', { visible: isVisible })}>
        Content
      </span>
    </div>
  );
};

• 解説