React で子コンポーネントに Props を渡すにはどうすればよいですか?

Props を {this.props.children} に渡す

子要素を受け入れる汎用コンポーネントを定義する場合、特定のプロパティをそれらすべての子コンポーネントに渡すことが必要になります。 。 React コンポーネント パラダイムでは、これは {this.props.children} を使用することで実現されます。しかし、疑問が生じます: これらのプロパティをどのように継承するのですか?

新しい Props で子のクローンを作成する

React.Children には、子要素を反復処理してクローンを作成するユーティリティが用意されており、変更されたプロパティを作成できます。新しいプロパティを含むバージョン:

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

function Parent({ children }) {
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

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

注: 通常、使用することはお勧めしません。 cloneElement アプローチは、脆弱性と型安全性の問題の可能性があるため、使用されません。

以上がReact で子コンポーネントに Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。