javascript - 如何将函数传播到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>