如何将函数传播到div元素中？

Question

我有一个功能可以处理提示的显示/隐藏和位置：

  tooltip = (e) => {
        // show/hide and position of tooltip
        // get element data
      }

还有一个div元素要散布在其中：

<div {...tooltip} data='This is a tooltip 1'>Some div</div>
<div {...tooltip} data='This is a tooltip 2>Some div</div>

因此它看起来像：

<div onmouseover=tooltip(e) onmouseleave=tooltip(e) data='This is a tooltip 1'>Some div</div>

如何做到？

Answer 1

没有这样的预定解决方案，因为将同一个处理程序附加到多个事件不是一项常见的任务。应该是：

<div onMouseOver={tooltip} onMouseLeave={tooltip}>Some div</div>

如果经常需要这样做，请考虑创建一个助手：

const mouseEnterLeave = fn => ({ onMouseOver: fn, onMouseLeave: fn });

然后可以应用传播属性：

<div {...mouseEnterLeave(tooltip)}>Some div</div>