React.jsで子から親にPropsを渡すにはどうすればよいですか?-jsチュートリアル-php.cn

React.jsで子から親にPropsを渡すにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-15 18:23:03

オリジナル

741 人が閲覧しました

How to Pass Props from Child to Parent in React.js?

React.js の親コンポーネントに Props を渡す

のイベントを使用して子の Props を親コンポーネントに送信することはできませんかReact.js?

他のソリューションも存在しますが、基本的な点を見落としていることがよくあります。親は子供に渡す小道具をすでに持っています。したがって、子がこれらのプロップを親に送り返す必要はありません。

より良いアプローチ

子:
子コンポーネントは次のとおりです。シンプルに保たれています。

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

ログイン後にコピー

親 (単一の子):
子に送信するプロップを利用して、親はクリックイベントを処理します。

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

ログイン後にコピー

親 (子のリスト):
親は、必要な情報へのアクセスを失わずに複数の子を管理します。

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

ログイン後にコピー

この戦略はカプセル化を尊重し、依存を避けることで結合を軽減します。子供の内部構造

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