javascript - 在 React 中将 props 传递给 this.props.children

Question

我在想办法将道具传递给组件的孩子时遇到了一些麻烦。我想做的是有一个组件（ParentComponent），它有一个函数（toggleSuccess（）），它改变自己的状态（例如一个称为成功的布尔值）并将该函数作为onClick道具传递给它的所有孩子。理想情况下，我可以将各种组件放入 ParentComponent，它们都可以通过 onClick 属性访问 toggleSuccess()。有没有办法做到这一点，不涉及任何草率的全局变量，或者需要像 redux 这样的中央状态管理？谢谢！

标签： javascriptreactjs

Answer 1

事件冒泡，因此您可以捕获父级中的所有单击事件，而不是向下传递处理程序：

 class ParentComponent extends React.Component {
  //...
  toggleSuccess() { /*...*/ }
  //...
  render() {
    const { children } = this.props;
    return (
      <div onClick={() => this.toggleSuccess()} >
       {...children}
      </div>
     );
   }
 }