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

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

在 React.js 中处理父子关系时，可能不会立即生效显然如何将子组件的 props 传递给其父组件。然而，有一种简单的方法可以避免依赖事件或复杂的配置。

识别问题

尝试直接将子级的 props 传递给其子级时，就会出现问题。父级使用 onClick 等事件。尝试通过事件访问孩子的道具会提出一个问题：既然父母已经拥有这些道具，为什么需要这种方法。

更简单的方法

更简化的解决方案涉及利用父级已经可以访问其子级的道具并使用它们的事实直接：

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

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

避免过度耦合

不建议通过 onClick 处理程序将整个子组件传递给父组件的解决方案，因为它们会引入不必要的耦合并妥协封装。相反，最好将组件之间的交互限制在各自的接口上。​​

以上是如何在 React.js 中将 Props 从子组件传递到父组件？的详细内容。更多信息请关注PHP中文网其他相关文章！