React の動的コンポーネント名

1. 動的コンポーネント名と JSX
2. React の動的コンポーネント名

React は、UI を構築するための最も一般的な選択肢の 1つです。 React を使用すると、動的にコンテンツを表示および非表示にしたり、CSS スタイルを条件付きで適用したりするなど、ユーザーのアクションに即座に応答できます。

この記事では、React の動的コンポーネント名について説明します。

動的コンポーネント名と JSX

React でレンダリングされたコンポーネントの名前を動的に変更する方法を理解するには、まず、テンプレート言語 JSX を理解する必要があります。

JSX は React のデフォルトのテンプレート言語です。 これにより、React 開発者はコンポーネントのきちんとした階層を宣言的に作成できます。

JSX を使用すると、開発者はトップレベルの React API を使用するよりも速く React アプリケーションを構築できます。

JSX は読み書きが簡単な構文にすぎないことを理解することが重要です。 内部的には、すべての React アプリケーションは、React のトップレベル API のメソッドへの複雑な呼び出しで構成されています (createElement()、createFactory()、cloneElement() など)。

React の動的コンポーネント名

ブログを運営していて、さまざまな種類のコンポーネント (テキスト、ビデオ、画像) を動的にレンダリングしたいとします。

まず、コンポーネントを呼び出す前に、コンポーネントを定義および作成する必要があります。 それらを動的に生成することはできません。 ただし、動的な値に応じて、異なるコンポーネントとして解釈できる <SomeComponent> を宣言的に呼び出すことができます。

JSX で <SomeComponent> を記述すると、React.createElement(SomeComponent, {}) メソッドの呼び出しとして、React のネイティブ レベル API に変換されます。 React.createElement() メソッドの最初の引数は、HTML タグまたは関数である必要があります。 したがって、SomeComponent 変数は、HTML 要素またはコンポーネントのいずれかを参照する必要があります。

初心者は、コンポーネント名を動的に生成し、変数に文字列として保存することをよく間違えます。 React.createElement() メソッドへの最初の引数をプレーンな文字列にすることはできないため、これは間違っています。

たとえば、これは間違っています。

var category = "Text";
var SomeComponent = category + "Component";
return <SomeComponent />;

一見すると、コード スニペットのすべてが正常に機能するはずですが、たとえ文字列値が大文字であっても、SomeComponent 変数に文字列値が含まれるため、これは機能しません。 代わりに、有効な React コンポーネント (または HTML タグ) でなければなりません。

React で動的コンポーネント名を使用する正しい方法

コンポーネントの各タイプのプロパティ名を持つオブジェクトを作成します。 これらのプロパティの値は、実際の React コンポーネントを参照する必要があります。

次に、動的に生成された文字列を含む変数を作成し、この変数を使用して、オブジェクトに格納されているコンポーネントの 1つを参照できます。

実際のコードを見てみましょう。

export default function App() {
  const componentNames = {
    text: TextComponent,
    video: VideoComponent,
    picture: PictureComponent
  };
  var category = "text";
  var SomeComponent = componentNames[category];
  return (
    <div className="App">
      <SomeComponent />
    </div>
  );
}

function TextComponent() {
  return (
    <div>
      <h1>I am a dynamically named Text Component</h1>
    </div>
  );
}
function VideoComponent() {
  return (
    <div>
      <h1>I am a dynamically named Video Component</h1>
    </div>
  );
}
function PictureComponent() {
  return (
    <div>
      <h1>I am a dynamically named Picture Component</h1>
    </div>
  );
}

CodeSandbox でコードを自分で編集して試すことができます。

ここに、1つの親コンポーネントと 3つの子コンポーネントの基本的な例があります。 技術的には、親には子コンポーネントが 1つしかありませんが、category 変数の値に応じて、TextComponent、VideoComponent、および PictureComponent の 3つのコンポーネントすべてが代わりに使用できます。

現在、category 変数は text に設定されています。 componentNames オブジェクトで対応する TextComponent を検索するために使用します。 必要なコンポーネントのタイプを決定したら、それを SomeComponent 変数に格納します。

App コンポーネントで SomeComponent 変数を呼び出します。この変数は、category 変数の文字列値に応じて、3つの異なるコンポーネントを参照できます。

これは、特定のコンポーネントを動的にレンダリングする、またはレンダリングしないために使用できる強力な機能です。 この場合、静的な文字列値があります。 ただし、ユーザー入力を収集および使用して、レンダリングが必要なコンポーネントとスキップできるコンポーネントを判断できます。