与ReactJS的工具提示div [英] tooltip div with ReactJS

问题描述

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

HTML

I have a div that I want to make act like a tooltip with reactjs.

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

我习惯使用 ng-show 在< div> 中有一个条件，我想知道在reactjs中是否存在这样的绑定，或者我该如何执行这个功能？

I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?

谢谢

Thanks

推荐答案

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

You can make your component to return the following markup

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 您需要更改组件状态以显示工具提示。

So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.

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

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

例如： http://codepen.io/anon/pen/YwWRVb

你可以从这篇文章开始深入阅读React： https://facebook.github.io/react/docs/thinking-in-react.html

You can start diving in React with this article: https://facebook.github.io/react/docs/thinking-in-react.html

这篇关于与ReactJS的工具提示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！