当 React 显示另一个相同的组件时隐藏组件答案

【问题标题】：Hide component when another identical component is shown with React当 React 显示另一个相同的组件时隐藏组件
【发布时间】：2016-07-28 22:50:34
【问题描述】：

我有一个项目列表 (ResultItem)，其中有一个内部组件 (ResultTag)，单击该组件时，会在其上方显示一个工具提示（添加了一个 HTML 类，再次单击时将其删除，以隐藏它）。

但是，当我单击ResultTag，然后单击其下方ResultItem 之一中的ResultTag 时，两者都显示；除了我刚刚单击的那个之外，我将如何隐藏所有ResultTag，以便一次只能显示一个。

目前，在ResultItem 中，我有一个onClick 函数，每当用户单击ResultItem 和@ 987654332@ 可见。但是，我需要它在每个 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>
    )
}

隐藏是在ResultItem 中完成的，方法是设置状态，然后在ResultTag 中将其作为道具接收。

总结一下：

我在列表视图中有许多 ResultItem 组件
每个ResultItem 都有一个ResultTag，点击它时，标签/标签上方会显示一个工具提示
当一个ResultTag 可见，而另一个ResultItem 中的另一个被点击时，隐藏所有其他ResultTags

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

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

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

【讨论】：