Javascript 使用React显示另一个相同组件时隐藏组件

我有一个项目列表（

ResultItem

），其中包含一个组件（

ResultTag

），单击该组件时，在其上方显示一个工具提示（一个HTML类添加到其中，再次单击时删除，以隐藏它）

然而，当我点击

ResultTag

，然后点击它下面的

ResultTag

，两者都会显示；我将如何隐藏所有的

ResultTag

，而不是我刚才单击的那一个，这样一次只能显示一个

目前，在

ResultItem

中，我有一个

onClick

函数，每当用户单击

ResultItem

中的任何位置并且

ResultTag

可见时，该函数就会将

showTooltip

中的状态设置为false/hidden（使用道具）。但是，我需要它跨每个

ResultItem

，这意味着跨组件工作

下面是一些简化的代码：

/* ResultTag */

showTooltip() {
    this.setState({ showTooltip: true })
}

render() {
    return (
        <div onClick={this.showTooltip}>
            {this.renderTooltip()} { /* function which contains the JSX/HTML to show the toolip */ }
            <span className="tag--label">Tags</span>
        </div>
    )
}

/*ResultTag*/
showTooltip（）{
this.setState（{showTooltip:true}）
}
render（）{
返回(
{this.renderTooltip（）}{/*函数，其中包含用于显示toolip的JSX/HTML*/}
标签
)
}

隐藏在

ResultItem

中完成，方法是设置状态，然后在

ResultTag

中作为道具接收该状态

总结如下：

• 我在列表视图中有许多

  ResultItem

  组件
• 每个

  ResultItem

  中都有一个

  ResultTag

  ，单击后，在标记/标签上方显示一个工具提示
• 当一个

  ResultTag

  可见，并单击另一个

  ResultItem

  中的另一个时，隐藏所有其他

  ResultTag

  s

---

您可以将状态从每个单独的ResultItem中移动到父级，这样它就集中在一个地方，并且您可以强制执行逻辑，这样只有某个ResultItem才会显示其工具提示。您需要从父级内部管理状态，然后向每个ResultItem传递一个函数（可能再次向下传递到其ResultTag）以处理单击

我编写了一个示例应用程序，它显示了类似的行为（尽管略有不同），我编写它是为了演示如何为列表中的每个项目添加边框。您可以看到我如何将状态存储在父级中，以及如何通过道具将读取和更新状态的方法传递给子级。当然，您必须更改逻辑以仅强制单个项目处于活动状态，当前它支持列表中的任何项目处于“活动”状态。我写这篇文章的目的是为了得到一个答案：