React.js で子プロップを親に効果的に伝えるにはどうすればよいですか?

React.js で子プロパティを親に伝える

質問:

プロパティを転送する簡単な方法はありますか? React.js のイベントを使用して子のプロパティを親に渡す?

間違ったアプローチを明らかにする:

一部の回答では、子コンポーネント全体を引数として親関数に渡すことを提案しています。ただし、このアプローチにはいくつかの理由で問題があります。

• 不必要な結合: 親と子が緊密に結合されるため、親に影響を与えずに子を変更することが困難になります。
• カプセル化の欠如: 親は子の内部実装の詳細を公開し、カプセル化の原則に違反します。

より良い方法:

最適な解決策には、親がすでに子供に提供している小道具を利用することが含まれます。 props を介して必要なデータを子に渡すことで、親は外部メカニズムに依存せずにそのデータにアクセスして操作できます。

例:

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

// Parent Component
const Parent = () => {
  const handleChildClick = (e) => {
    // Access and use the prop passed to the child
    alert(`The Child button text is: ${e.target.innerText}`);
  };

  return <Child onClick={handleChildClick} text="Click Me" />;
};

このアプローチReact の設計哲学に従い、コンポーネント間の明確な境界を維持し、不必要な複雑さを回避します。

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