React将onMouseHover传递给Children组件

Question

我正在V2版本中实现一个名为react-hover的小型反应组件。

这个lib只是让用户定义他们的触发器和悬停组件，并在鼠标悬停在触发器组件上时显示悬停组件。

    <ReactHover
      options={optionsCursorTrueWithMargin}>
      <ReactHover.Trigger>
        <TriggerComponent />
      </ReactHover.Trigger>
      <ReactHover.Hover>
        <HoverComponent />
      </ReactHover.Hover>
    </ReactHover>

现在我遇到了将onMouseHover事件传递给tigger组件中的children组件的问题：

 render () {
     return (
     <div
        onMouseOver={this.onMouseOver.bind(this)}
        onMouseOut={this.onMouseOut.bind(this)}
        onMouseMove={this.onMouseMove.bind(this)}
        onTouchStart={this.onTouchStart.bind(this)}
        onTouchEnd={this.onTouchEnd.bind(this)}
    >
    {this.props.children.props.children}
  </div>
 )
}

因为只有子组件可以触发悬停组件，但在上面的实现中，它将侦听器绑定到父div，所以我遇到了父div的css宽度大于childen宽度的问题，所以当鼠标是在div（而不是孩子）中显示悬停组件。但我无法控制子组件的内部代码，因为它是作为子项传入的。

我只是想知道如何解决这个问题？

示例代码为here。 绑定鼠标事件的地方是here

只是想知道这是什么解决方案？ 当无法将代码放入子组件时，如何将这些事件绑定到子组件。

下面显示了触发器组件外部的鼠标是否仍然可以触发悬停组件。

Answer 1

刚刚通过在容器中添加引用并检索子宽度

来解决

let childStyles = this.refs.triggerContainer.children[0].style

并应用于当前的父容器。

检查此code