reactjs - React中如何根据其后代的className更改组件的className？

Question

我有一个 React App，它的结构类似于：

[编辑：这不是源代码（不只是在一个组件中），而是呈现的 html（我相信它足以描述问题）]：

<Component1 className="main-component1">
    <Something className="sub-component1"/>
    <SomethingDifferent className="sub-component2"/>
    <Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
    <SomethingDifferent className="sub-component2"/>
    <SomethingDifferent className="sub-component2"/>
        <div className="popup"/>
    </SomethingDifferent>
    <Something className="subComponent1"/>
</Component1>
.
.
.

popup仅在特定情况下呈现。我想将className其最高父级 ( Component1) 更改为className="main-component1 containsPopup". 知道怎么做吗？

我正在考虑使用Refs，但在这种情况下我无法找到合适的用途。

另一个想法是使用一些查询过滤器来查找它，但在我看来这不是一个好方法。

我会很高兴有任何想法^_^

标签： reactjsdomclassname