我有一个项目列表（ResultItem），其中有一个组件（ResultTag），点击后会在其上方显示一个工具提示（添加一个HTML类并在点击时删除再次，隐藏它。）
但是，当我点击ResultTag，然后点击其下方ResultTag之一的ResultItem时，两者都会显示;我将如何将所有ResultTag隐藏在我刚刚点击的那个之外，这样一次只能展示一个ResultItem。
目前，在onClick中，我有一个showTooltip函数，只要用户点击，就会将ResultTag中的状态ResultItem设置为false / hidden（使用props） ResultTag内的任何位置都可以看到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 in，点击后会在标记/标签上方显示工具提示ResultItem可见，而另一个ResultTag被点击时，隐藏所有其他ng-include 答案 0 :(得分：1)
您可以将状态从每个单独的ResultItem移动到父级，这样它可以集中在一个位置，您可以强制执行逻辑，以便只有某个ResultItem才会显示其工具提示。您需要从父级中管理状态，然后将函数传递给每个ResultItem（并且可能再次向下传入其ResultTag）以处理单击。
我写了一个示例应用程序，它显示了类似的行为（虽然略有不同），我写了它来演示如何为列表中的每个项添加边框。您可以看到我如何将状态存储在父级中，以及我如何传递读取方法并通过props将其更新为子级。您当然必须更改逻辑以仅强制执行单个项目处于活动状态，目前它支持列表中的任何项目处于活动状态＆＃39;。我在这里写了一个答案：https://stackoverflow.com/a/38646533/1515758