javascript - 带有 ReactJS 的工具提示 div

Question

目标

我有一个 div，我想用 reactjs 使它像工具提示一样。

HTML

<div>on hover here we will show the tooltip</div>
<div>
    <div class="tooltip_custom">this is the tooltip!!</div>
</div>

我习惯使用 ng-show 的 angularjs条件为 <div> , 我想知道 reactjs 中是否有这样的绑定(bind)，否则我该如何实现这个功能？

谢谢

Answer 1

您可以让您的组件返回以下标记

return (
  <div>
    <div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
    <div>
      <div style={tooltipStyle}>this is the tooltip!!</div>
    </div>
  </div>
);

tooltipStyle 的分配方式如下:

const tooltipStyle = {
  display: this.state.hover ? 'block' : 'none'
}

因此工具提示取决于组件状态，现在在 handleMouseIn 和 handleMouseOut 中，您需要更改组件状态以使工具提示可见。

handleMouseIn() {
  this.setState({ hover: true })
}

handleMouseOut() {
  this.setState({ hover: false })
}

这里正在工作example .

您可以通过这篇文章开始深入研究 React:Thinking in React .