React で Props を「this.props.children」に効果的に渡すにはどうすればよいですか?

{this.props.children} に props を渡す方法

この質問の目的は、ラッパー内のすべての子に props を渡す適切な方法を明確にすることです。レンダリングに {this.props.children} を利用するコンポーネント。

New を使用して子のクローンを作成するProps

1 つのアプローチには、React.Children の使用が含まれます。これは、各子要素を反復処理し、React.cloneElement を通じて新しい props でそれらのクローンを作成します。ただし、コードが脆弱になる可能性があるため、この方法は一般的に推奨されません。

例として、次のコードを考えてみましょう。

const Child = ({ childName, sayHello }) => (
  <button onClick={() => sayHello(childName)}>{childName}</button>
);

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // `React.isValidElement` ensures the child is a valid React element.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

このアプローチでは、子に props を渡すことができますが、次の代替方法と比べて、型安全性が低く、読みにくい可能性があります:

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  // Directly passing props to children.
  return <div>{children(sayHello)}</div>;
}

この後者のアプローチは、より明示的に意図を伝えます。子供にプロップを渡し、タイプ セーフティを維持します。

以上がReact で Props を「this.props.children」に効果的に渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。