如何在 React.js 中将 Props 从子组件传递到父组件而不将整个子组件传回？

如何在 React.js 中使用事件将 Props 从子组件传递到父组件

在 React.js 中，有多种方法从子组件传递数据给它的父级。虽然事件处理程序通常很方便，但了解最佳实践和潜在陷阱也很重要。

为什么我们不将整个子组件传回

其他解决方案此问题可能建议通过事件处理程序将整个子组件传递回父组件。但是，通常不建议使用这种方法，因为：

• 道具重复：父级已经拥有传递给子级的道具，因此无需将它们传回。
• 耦合和封装：以这种方式紧密耦合父级和子级可能会导致维护和重构问题。

更好的实现

相反，您应该利用父母已经拥有孩子需要的道具的事实。

孩子：

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);
  },
});

在这些示例中，家长可以访问道具然后单击子组件的目标，而不需要将整个子组件传回。

ES6 更新

对于 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中文网其他相关文章！