React で既存のコンポーネントにプロパティを追加する方法

コンポーネント定義を更新する

コンポーネント定義を更新して、新しいプロパティを受け取るようにすることができます。以下の例では、MyComponent コンポーネントに name というプロパティを追加する方法を示します。

// コンポーネント定義を更新する前の MyComponent コンポーネント
const MyComponent = () => {
  return <div>Hello!</div>;
};

// コンポーネント定義を更新した MyComponent コンポーネント
const MyComponent = (props) => {
  const { name } = props;
  return <div>Hello, {name}!</div>;
};

render メソッドを使用する

render メソッドを使用して、既存のコンポーネントインスタンスにプロパティを渡すこともできます。以下の例では、MyComponent コンポーネントインスタンスに name というプロパティを渡す方法を示します。

const MyComponent = () => {
  return <div>Hello!</div>;
};

const myComponentInstance = ReactDOM.render(<MyComponent />, document.getElementById('root'));

// `render` メソッドを使用してプロパティを渡す
myComponentInstance.render(<MyComponent name="John" />);

プロパティの型

プロパティには型を指定することができます。型を指定すると、コンポーネントが適切な型の値を受け取っていることを確認できます。以下の例では、MyComponent コンポーネントの name プロパティが文字列であることを指定する方法を示します。

const MyComponent = (props: { name: string }) => {
  const { name } = props;
  return <div>Hello, {name}!</div>;
};

デフォルトのプロパティ

コンポーネントにデフォルトのプロパティを指定することができます。デフォルトのプロパティは、コンポーネントに明示的にプロパティが渡されない場合に値が使用されます。以下の例では、MyComponent コンポーネントの name プロパティのデフォルト値を "World" に設定する方法を示します。

const MyComponent = (props: { name?: string }) => {
  const { name = "World" } = props;
  return <div>Hello, {name}!</div>;
};

const App = () => {
  return (
    <div>
      <MyComponent name="John" />
      <MyComponent name="Jane" />
    </div>
  );
};

この例では、App コンポーネントは MyComponent コンポーネントを2回レンダリングします。最初のレンダリングでは、name プロパティに "John" が渡されます。2番目のレンダリングでは、name プロパティに "Jane" が渡されます。

React で既存のコンポーネントにプロパティを追加するには、コンポーネント定義を更新するか、render メソッドを使用することができます。プロパティには型を指定し、デフォルトのプロパティを指定することができます。また、親コンポーネントから子コンポーネントにプロパティを伝達することができます。

// コンポーネント定義を更新する前の MyComponent コンポーネント
const MyComponent = () => {
  return <div>Hello!</div>;
};

// コンポーネント定義を更新した MyComponent コンポーネント
const MyComponent = (props) => {
  const { name } = props;
  return <div>Hello, {name}!</div>;
};

// App コンポーネント
const App = () => {
  return (
    <div>
      <MyComponent name="John" />
      <MyComponent name="Jane" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

このコードを実行すると、以下の出力がコンソールに表示されます。

Hello, John!
Hello, Jane!

この例では、MyComponent コンポーネントインスタンスに name というプロパティを動的に渡す方法を示します。

const MyComponent = () => {
  return <div>Hello!</div>;
};

const myComponentInstance = ReactDOM.render(<MyComponent />, document.getElementById('root'));

// `render` メソッドを使用してプロパティを渡す
myComponentInstance.render(<MyComponent name="John" />);
myComponentInstance.render(<MyComponent name="Jane" />);

Hello, John!
Hello, Jane!

例 3：プロパティの型を指定する

この例では、MyComponent コンポーネントの name プロパティが文字列であることを指定する方法を示します。

const MyComponent: React.FC<{ name: string }> = (props) => {
  const { name } = props;
  return <div>Hello, {name}!</div>;
};

// App コンポーネント
const App = () => {
  return (
    <div>
      <MyComponent name="John" />
      <MyComponent name="Jane" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

このコードは、name プロパティが文字列以外の値で渡された場合にコンパイルエラーが発生するようにします。

例 4：デフォルトのプロパティを指定する

const MyComponent: React.FC<{ name?: string }> = (props) => {
  const { name = "World" } = props;
  return <div>Hello, {name}!</div>;
};

// App コンポーネント
const App = () => {
  return (
    <div>
      <MyComponent />  {/* name プロパティを渡さない */}
      <MyComponent name="John" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Hello, World!
Hello, John!

例 5：プロパティを伝達する

const MyComponent: React.FC<{ name: string }> = (props) => {
  const { name } = props;
  return <div>Hello, {name}!</div>;
};

// App コンポーネント
const App = () => {
  return (
    <div>
      <MyComponent name="John" />
      <MyComponent name="Jane" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Hello, John!
Hello, Jane!

高階コンポーネント (HOC)

高階コンポーネントは、既存のコンポーネントをラップして、その機能を拡張するのに役立ちます。プロパティを追加することもできます。

コンポーネントの合成

コンポーネントの合成とは、複数のコンポーネントを組み合わせて新しいコンポーネントを作成することです。既存のコンポーネントにプロパティを追加するには、コンポーネントの合成とプロパティの伝達を組み合わせることができます。

コンテキスト

コンテキストは、アプリケーション全体でデータを共有するための React の仕組みです。コンポーネントにプロパティを追加するには、コンテキストを使用することができますが、他の方法と比べて複雑な場合があります。

どの方法を選択すべきか

使用する方法は、状況によって異なります。コンポーネントの定義を更新するのが最も簡単で直接的な方法ですが、コンポーネントのコードを変更する必要があるため、再利用が難しい場合があります。render メソッドを使用すると、コンポーネントのコードを変更せずにプロパティを追加できますが、柔軟性に欠ける場合があります。高階コンポーネント、コンポーネントの合成、コンテキストは、より複雑な状況で使用されます。

具体的な例

以下は、それぞれの方法に関する追加情報です。