ReactJS：始终将道具转移到子组件

我有一个高阶组件，它跟踪任何组合组件的

mouseover

事件。大致是这样的：

（组件）=>类TrackMouseOver扩展React.Component{
扶手椅=（e）=>{
log（'Mouse-over！'）；
};
render（）{
返回；
}
};

然而，这并不能很好地工作，因为React组件本身并没有绑定到DOM事件。除非组件处理

onMouseOver

prop，否则上述HOC将无法工作

---

在不破坏React组件的黑盒特性的情况下，总是将道具转移到子元素是否更好？如果是，这样做会对性能产生显著影响吗？

如果开始向下传递处理函数，，则会违反事件的自然流动，因为它们会在DOM中向上冒泡

相反，使用侦听器将组件包装在处理元素中，并利用事件冒泡

(Component) => class TrackMouseOver extends React.Component {
  handleMouseOver(e) {
    e.target        // is the element that triggered the event
    e.currentTarget // is the element this handler is attached to
  }

  render() {
    return (
      <div onMouseOver={this.handleMouseOver}>
        <Component {...this.props} />
      </div>
    );
  }
};

（组件）=>类TrackMouseOver扩展React.Component{
扶手房（东）{
e、 target//是触发事件的元素
e、 currentTarget//是此处理程序附加到的元素
}
render（）{
返回(
);
}
};

单击新的

div

中的一个元素时，事件的生命周期分为两部分

捕获 浏览器会计算出事件发生在哪个顶级元素上，然后是该元素的哪个子元素，依此类推，直到事件最终结束于一个没有子元素的元素—目标

此序列不会触发任何事件侦听器（除非它们设置了

useCapture

标志），它只标识事件的路径

冒泡 现在已到达事件的目标元素，事件气泡将捕获的路径备份到DOM的根，并在执行时触发事件侦听器

这就是为什么附加到

body

元素的事件处理程序总是触发*，而不管事件发生在哪个元素上。

主体是所有元素的共同祖先

在您的例子中，您可以利用这样一个事实，即
div
中任何元素的事件最终都会冒泡到该事件处理程序

您可以使用
event.target
确定事件来自哪个元素


*如果某个子元素上的事件处理程序调用
Event.preventDefault
或
Event.stopPropagation
啊，那么事件处理程序将不会触发，这是我遗漏的。关于浏览器事件系统的详细说明。谢谢顺便问一下，有什么方法可以避免使用包装元素吗？一个典型的用例是当包装的组件不应该是块元素时。更复杂。React组件本身无法处理事件，因此需要一个DOM元素。CSS不能向上工作，因此也不能使用
display:inherit
。尝试给包装器元素显示
内联块
，看看它是如何响应的。我明白了。我认为这是一个React可以探索的领域（组合行为），因为ES6类不推荐使用混合。那将是另一个话题：）