Facebook React の JSX で条件付き要素を作成して DRY を維持する方法
三項演算子
最も簡単な方法は、三項演算子を使うことです。
const element = condition ? <ComponentA /> : <ComponentB />;
return (
<div>
{element}
</div>
);
この例では、condition が真であれば ComponentA がレンダリングされ、偽であれば ComponentB がレンダリングされます。
&& 演算子
&& 演算子は、左側の式が真の場合のみ右側の式を評価します。
const element = condition && <ComponentA />;
return (
<div>
{element}
</div>
);
この例では、condition が真の場合のみ ComponentA がレンダリングされます。
フラグメント
複数の要素を条件付きでレンダリングしたい場合は、フラグメントを使うことができます。
const elements = condition ? (
<>
<ComponentA />
<ComponentB />
</>
) : null;
return (
<div>
{elements}
</div>
);
コンポーネントの条件付きレンダリング
条件によって異なるコンポーネントをレンダリングしたい場合は、コンポーネントの条件付きレンダリングを使うことができます。
const MyComponent = ({ condition }) => {
if (condition) {
return <ComponentA />;
} else {
return <ComponentB />;
}
};
return (
<div>
<MyComponent condition={condition} />
</div>
);
DRY を維持する方法
上記のいずれの方法を使用する場合でも、DRY (Don't Repeat Yourself) 原則を維持するために、以下の方法を使用できます。
- 条件付き要素を抽出する
- コンポーネントを作成する
- 高階関数を使用する
条件付き要素を抽出することで、コードをより簡潔にすることができます。
const ConditionalElement = ({ condition }) => {
if (condition) {
return <ComponentA />;
} else {
return <ComponentB />;
}
};
return (
<div>
<ConditionalElement condition={condition} />
</div>
);
この例では、ConditionalElement というコンポーネントを作成して、条件付き要素を抽出しています。
const ComponentA = () => {
// ...
};
const ComponentB = () => {
// ...
};
const MyComponent = ({ condition }) => {
if (condition) {
return <ComponentA />;
} else {
return <ComponentB />;
}
};
return (
<div>
<MyComponent condition={condition} />
</div>
);
この例では、ComponentA と ComponentB というコンポーネントを作成して、条件によってどちらか一方をレンダリングしています。
const withCondition = (condition) => (Component) => {
return (props) => {
if (condition) {
return <Component {...props} />;
} else {
return null;
}
};
};
const MyComponent = () => {
// ...
};
const ConditionalComponent = withCondition(condition)(MyComponent);
return (
<div>
<ConditionalComponent />
</div>
);
const App = () => {
const [condition, setCondition] = React.useState(true);
return (
<div>
<button onClick={() => setCondition(!condition)}>Toggle Condition</button>
{condition ? <ComponentA /> : <ComponentB />}
</div>
);
};
const ComponentA = () => {
return (
<div>
<h1>Component A</h1>
</div>
);
};
const ComponentB = () => {
return (
<div>
<h1>Component B</h1>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
このコードをブラウザで実行すると、ボタンをクリックするたびに ComponentA と ComponentB が切り替わります。
React で条件付き要素を作成するには、さまざまな方法があります。DRY 原則を維持するためには、条件付き要素を抽出したり、コンポーネントを作成したり、高階関数を使用したりすることができます。
switch 文
複数の条件に基づいて要素をレンダリングしたい場合は、switch 文を使うことができます。
const element = (
switch (condition) {
case "A":
<ComponentA />;
case "B":
<ComponentB />;
default:
null;
}
);
return (
<div>
{element}
</div>
);
.map() メソッド
配列に基づいて要素をレンダリングしたい場合は、.map() メソッドを使うことができます。
const elements = conditions.map((condition) => {
if (condition) {
return <ComponentA />;
} else {
return null;
}
});
return (
<div>
{elements}
</div>
);
ライブラリの使用
react-switch や react-if などのライブラリを使用することで、条件付き要素をより簡単に作成することができます。
これらのライブラリは、switch 文や .map() メソッドよりも簡潔なコードを書くことができます。
javascript reactjs
