如何在 React.js 中将子 Props 传递给父级？

在 React.js 中将子组件传递给父组件

Context

React 通过 props 在父组件和子组件之间提供了强大的通信机制。但是，在某些情况下，您可能希望将整个子组件及其 props 传递给父组件。当您想要将复杂的逻辑封装在子级中并向父级提供更简单的接口时，这非常有用。

关于子级到父级 Prop 传递的担忧

历史上，一些开发人员建议使用事件将子 props 传递给父级，但这种方法引起了对耦合和封装的担忧。直接在父组件中访问子组件的 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 中将子 Props 传递给父级？的详细内容。更多信息请关注PHP中文网其他相关文章！