reactjs - React 将 onMouseHover 传递给子组件

Question

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

这个库只是让用户能够定义他们的触发器和悬停组件，并使悬停组件在鼠标悬停在触发器组件上时出现。

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

现在我面临着将 onMouseHover 事件传递给 tigger 组件中的子组件的问题:

 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>
 )
}

因为只有子组件可以触发悬停组件，但是在上面的实现中，它将监听器绑定(bind)到父 div，所以我遇到了父 div 的 css 宽度大于子组件的宽度的问题，所以当鼠标在 div 上(不是在 child 中)悬停组件出现。但是我无法控制子组件的内部代码，因为它是作为子组件传入的。

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

示例代码是here .绑定(bind)鼠标事件的地方是here

只是想知道这个问题的解决方案是什么？当不能在子组件中放置代码时，如何将这些事件绑定(bind)到子组件。

下图显示鼠标在触发组件外时仍然可以触发悬停组件。

Answer 1

只需将 ref 添加到容器并检索子项的宽度即可解决:

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

并应用于当前父容器。

检查这个code