为什么在 array.map() 中多次生成 React-Tooltip？

Question

最近我开始使用 ReactJS，我是一个超级初学者。这可能是一个非常简单的问题，但我不知道如何解决这个错误。

我在 this.state 中有 3 个图像，并使用 .map() 将它们展开到屏幕上。还有我从https://www.npmjs.com/package/react-tooltip下载的 ReactTooltip

但是有一些我无法修复的错误，它甚至没有显示在控制台屏幕上。问题是每当您将鼠标放在图像上时，就会多次生成 ReactTooltip。任何人都可以帮我解决这个问题吗？

这是我的代码和示例演示。
演示：http : //tooltip-test-moonformeli.c9users.io/
代码：

感谢您的时间！

Answer 1

您似乎错误地使用了 ReactTooltip 组件。你只需要包含一次 ReactTooltip 组件，你应该为每个带有data-tip属性的元素指定你的工具提示文本。因此，您可以将渲染函数更改为如下所示的内容。

render(){
    const mapToState = this.state.data.map(planet, i) => {
      return (
        <div>
          <img data-tip={planet} src={planet}/>
        </div>
      );
    };

    return (
      <div>
        {mapToState}
        <ReactTooltip/>
      </div>
    );
}