React.jsで子プロパティを親に渡すにはどうすればよいですか?

React.js で子プロパティを親に渡す

コンテキスト

React は、プロパティを介して親コンポーネントと子コンポーネント間の強力な通信メカニズムを提供します。ただし、子コンポーネント全体をそのプロパティとともに親に渡したい場合もあります。これは、子内に複雑なロジックをカプセル化し、より直接的なインターフェイスを親に提供したいシナリオで役立ちます。

子から親への Prop の受け渡しに関する懸念

歴史的には、開発者は、イベントを使用して子プロパティを親に渡すことを提案していますが、このアプローチでは結合とカプセル化に関する懸念が生じます。親内で子コンポーネントの props と実装の詳細に直接アクセスすると、コンポーネントが緊密に結合され、リファクタリング作業が妨げられる可能性があります。

推奨アプローチ

代わりに、既存の親 prop メカニズムを利用してアクセスすることをお勧めします。子供のデータ。これにより、親が子に提供する props を利用できるようになり、子自身の内部から子の props を取得する必要がなくなります。

クラス コンポーネントを使用した実装

子コンポーネント:

class Child extends Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  }
}

親コンポーネント:

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <Child
        onClick={this.handleChildClick}
        text={this.state.childText}
      />
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

機能コンポーネントを使用した実装

子コンポーネント:

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

親コンポーネント:

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <Child
          key={childData.childNumber}
          onClick={(event) => handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </div>
  );
};

結論

React の既存の prop メカニズムを採用することで、親コンポーネントとコンポーネントの間でデータを効果的に渡すことができます。不必要な結合を導入したり、カプセル化原則に違反したりすることなく、子コンポーネントを構築できます。このアプローチにより、コンポーネントの独立性と柔軟性が確保され、よりクリーンで保守しやすいコードが可能になります。

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