子全体を戻さずに、React.js で子コンポーネントから親コンポーネントに Props を渡す方法は?

イベントを使用して React.js の子コンポーネントから親コンポーネントに Props を渡す方法

React.js では、子コンポーネントからデータを渡すためのさまざまなアプローチがありますその親に。イベント ハンドラーは便利な場合が多いですが、ベスト プラクティスと潜在的な落とし穴を理解することが重要です。

子コンポーネント全体を戻さない理由

その他の解決策この問題は、イベント ハンドラーを通じて子コンポーネント全体を親に戻すことを示唆している可能性があります。ただし、このアプローチは一般に推奨されません。次の理由からです。

• Props の重複: 親は子に渡される props をすでに持っているため、それらを返す必要はありません。
• 結合とカプセル化: この方法で親と子を緊密に結合すると、メンテナンスやリファクタリングの問題が発生する可能性があります。

より良い実装

代わりに、親が子に必要な小道具をすでに持っているという事実を利用する必要があります。

子:

var Child = React.createClass({
  render: function() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

親 (単一の子):

var Parent = React.createClass({
  getInitialState: function() {
    return { childText: "Click me! (parent prop)" };
  },
  render: function() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  },
  handleChildClick: function(event) {
    // Access the props passed to the child
    alert("The Child button text is: " + this.state.childText);
    // Access the click target
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

親 (複数の子):

var Parent = React.createClass({
  getInitialState: function() {
    return {
      childrenData: [
        { childText: "Click me 1!", childNumber: 1 },
        { childText: "Click me 2!", childNumber: 2 },
      ],
    };
  },
  render: function() {
    const children = this.state.childrenData.map(
      (childData, childIndex) => {
        return (
          <Child
            onClick={this.handleChildClick.bind(null, childData)}
            text={childData.childText}
            key={childIndex}  // Added key for each child component
          />
        );
      }
    );
    return <div>{children}</div>;
  },
  handleChildClick: function(childData, event) {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

これらの例では、親は props にアクセスできます。子コンポーネント全体を返す必要がなく、子コンポーネントのターゲットをクリックします。

ES6 Update

ES6 構文の場合、コードは次のようになります。

子:

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

親 (単一の子):

class Parent extends React.Component {
  state = { childText: "Click me! (parent prop)" };
  handleChildClick = (event) => {
    alert("The Child button text is: " + this.state.childText);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  }
}

親 (複数の子) :

class Parent extends React.Component {
  state = {
    childrenData: [
      { childText: "Click me 1!", childNumber: 1 },
      { childText: "Click me 2!", childNumber: 2 },
    ],
  };
  handleChildClick = (childData, event) => {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    const children = this.state.childrenData.map((childData, childIndex) => (
      <Child key={childIndex} text={childData.childText} onClick={(e) => this.handleChildClick(childData, e)} />
    ));
    return <div>{children}</div>;
  }
}

これらのソリューションにより、子コンポーネントから親コンポーネントに必要な情報を渡す際の柔軟性を提供しながら、より適切なカプセル化とメンテナンスが可能になります。

以上が子全体を戻さずに、React.js で子コンポーネントから親コンポーネントに Props を渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。