switchステートメントを使用する

React の render 関数内で if...else ステートメントを使用する

三項演算子を使用する

const element = condition ? <ComponentA /> : <ComponentB />;
return (
  <div>
    {element}
  </div>
);

利点:

• 簡潔に記述できる
• 読みやすい

• ネストが深くなると複雑になり、可読性が低下する

条件分岐用の関数を作成する

const renderComponent = () => {
  if (condition) {
    return <ComponentA />;
  } else {
    return <ComponentB />;
  }
};

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

• コードを分割して整理できる
• 可読性が高くなる

• コード量が増える

フラグメントを使用する

return (
  <div>
    {condition && <ComponentA />}
    {!condition && <ComponentB />}
  </div>
);

• 条件分岐が分かりやすい

• 複雑な条件分岐には不向き

switch ステートメントを使用する

const element = () => {
  switch (condition) {
    case 'case1':
      return <ComponentA />;
    case 'case2':
      return <ComponentB />;
    default:
      return null;
  }
};

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

• 複数の条件分岐をまとめて記述できる

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={handleLogout} />
      ) : (
        <LoginButton onClick={handleLogin} />
      )}
    </div>
  );
};

このコードでは、isLoggedIn が true の場合は LogoutButton コンポーネント、false の場合は LoginButton コンポーネントをレンダリングしています。

const element = condition ? <ComponentA /> : <ComponentB />;
return (
  <div>
    {element}
  </div>
);

const renderComponent = () => {
  if (condition) {
    return <ComponentA />;
  } else {
    return <ComponentB />;
  }
};

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

return (
  <div>
    {condition && <ComponentA />}
    {!condition && <ComponentB />}
  </div>
);

const element = () => {
  switch (condition) {
    case 'case1':
      return <ComponentA />;
    case 'case2':
      return <ComponentB />;
    default:
      return null;
  }
};

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

これらのサンプルコードを参考に、状況に合わせて if...else ステートメントを使用してみてください。

React の render 関数内で if...else ステートメントを使用する他の方法

テンプレートリテラルを使用する

const element = `
  ${condition ? `<ComponentA />` : `<ComponentB />`}
`;

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

.map() 関数を使用する

const elements = [<ComponentA />, <ComponentB />];

return (
  <div>
    {elements.map((element, index) => (
      condition ? element : null
    ))}
  </div>
);

カスタムフックを使用する

const useConditionalRender = (condition) => {
  const [element, setElement] = useState(null);

  useEffect(() => {
    setElement(condition ? <ComponentA /> : <ComponentB />);
  }, [condition]);

  return element;
};

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const element = useConditionalRender(isLoggedIn);

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

X