{...this.props}以外の方法：個別、オブジェクト、React.cloneElement

2024-04-02

ReactJSにおける {...this.props} の意味

従来の方法では、各 props を個別に渡す必要がありました。

<ChildComponent
  name="John Doe"
  age={30}
  email="[email protected]"
/>

スプレッド構文を使用すると、コードをより簡潔に書けます。

<ChildComponent {...this.props} />

このコードは、親コンポーネントのすべての props を 子コンポーネント に渡します。

例

const ParentComponent = () => {
  const name = "John Doe";
  const age = 30;
  const email = "[email protected]";

  return (
    <div>
      <ChildComponent {...this.props} />
    </div>
  );
};

const ChildComponent = ({ name, age, email }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
      <p>{email}</p>
    </div>
  );
};

この例では、ParentComponent は ChildComponent に name、age、email の props を渡します。

{...this.props} は、props オブジェクト のすべての キーと値のペア を展開します。

利点

コードをより簡潔に書ける
props の数を増減しても、コードを簡単に変更できる
子コンポーネントに必要なすべての props を確実に渡せる

注意点

this.props は、render 関数内でのみ使用できる
子コンポーネントで使用する props の名前は、親コンポーネントで定義されているものと同じである必要がある

const ParentComponent = () => {
  const name = "John Doe";
  const age = 30;
  const email = "[email protected]";

  return (
    <div>
      <h1>親コンポーネント</h1>
      <ChildComponent {...this.props} />
    </div>
  );
};

const ChildComponent = ({ name, age, email }) => {
  return (
    <div>
      <h1>子コンポーネント</h1>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
      <p>メールアドレス: {email}</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <ParentComponent />
    </div>
  );
};

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

このコードを実行すると、ブラウザに以下の内容が表示されます。

親コンポーネント

子コンポーネント

名前: John Doe
年齢: 30
メールアドレス: [email protected]

{...this.props} を使用することで、コードをより簡潔に書くことができます。

{...this.props} 以外の方法

個別に props を渡す

<ChildComponent
  name="John Doe"
  age={30}
  email="[email protected]"
/>

この方法は、props の数が少ない場合に適しています。

props オブジェクトを渡す

const props = {
  name: "John Doe",
  age: 30,
  email: "[email protected]",
};

<ChildComponent {...props} />

React.cloneElement を使用する

const child = React.cloneElement(
  <ChildComponent />,
  {
    name: "John Doe",
    age: 30,
    email: "[email protected]",
  }
);

ReactDOM.render(child, document.getElementById("root"));