React：在嵌套组件上冒泡点击事件答案

【问题标题】：React: Bubbling up click events on nested componentsReact：在嵌套组件上冒泡点击事件
【发布时间】：2016-04-10 19:59:47
【问题描述】：

我正在创建一个 React 文件树，并将树设置为 React 组件。树可以采用 contents 属性，它是一个字符串数组或其他 <Tree /> 组件（这启用了嵌套文件结构 UI）。这些树组件可以无限嵌套。

我需要在嵌套树组件的子级上注册一个点击事件，但我无法让它在第一级嵌套之外工作。我正在处理的一个简化示例：

//In App - the top level component

 const App = React.createClass({
   _handleChildClick () {
     console.log("this is where all child clicks should be handled");
   },

   render () {
     return (
       <Tree
         handleChildClick={this._handleChildClick}
         contents={[
           <Tree />
         ]}
       />
     );
   }
 });

 //And in the tree component

 <div onClick={this.props.handleChildClick}></div>

If you want to see more detail - here's the github repo.

我尝试研究这个问题并看到人们使用{...this.props}，但我不确定这是否适用于我的场景 - 如果适用，我无法让它工作。

感谢您对此的任何帮助。

【问题讨论】：

标签： javascript reactjs tree onclick

【解决方案1】：

点击处理在第一级之外不起作用的原因是因为您的第二级 Tree 组件（内容数组中的那个）没有得到适当的 prop handleChildClick 传入。（顺便说一句，我认为约定是在处理函数被称为handleChildClick 时调用道具onChildClick - 但我离题了。）

我是否正确理解您实际上想要通知从单击的组件到顶部的每一层？为此，您需要扩展内容数组内的树组件的道具 - 它需要接收其父组件的点击处理程序。当然，你不能静态地写下来，所以它需要动态地完成：

您的 Tree 组件，在实际渲染它的子组件之前，应该使用组件的单击处理程序扩展它们中的每一个，这可以使用函数 React.cloneElement 来完成（参见 API documentation 和 a more detailed discussion）。直接将它应用于您的组件会使事情变得有些混乱，因为您将组件的子项传递给一个道具，因此您需要弄清楚要修改哪个道具。有点不同的布局会在这里帮助你很多：

   <Tree handleChildClick={this._handleChildClick}>
       <Tree />
   </Tree>

恕我直言，看起来更好，结构更清晰。可以通过 this.props.children 访问内部组件，cloneElement 使用起来会简单很多。

所以，在你的 Tree 组件中，你可以有这样的渲染方法：

render () {
  const newChildren = this.props.children.map(child =>
    React.cloneElement(child, {onChildClick: this._handleChildClick}));
  return (
    <div>{newChildren}</div>
  );
}

请注意，如果您有字符串和Tree 组件的混合，则此代码将不起作用，因此我的第三个也是最后一个建议是将这些字符串包装到一个非常薄的组件中以便于处理。或者，您当然可以在地图内进行类型比较。

【讨论】：