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

我在this.state中有3张图片,并使用.map()将它们散布到屏幕上。还有我从https://www.npmjs.com/package/react-tooltip下载的ReactTooltip

但是有一些我无法修复的错误,甚至没有显示在控制台屏幕上。问题是,每当您将鼠标指针放在图像上时,都会多次生成ReactTooltip。谁能帮我解决这个问题?

这是我的代码和示例演示。
演示:http://tooltip-test-moonformeli.c9users.io/
代码:javascript - 为什么React-Tooltip在array.map()中多次生成?-LMLPHP

感谢您的时间!

最佳答案

看来您使用的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>
    );
}

10-08 19:31