React中两个孪生兄弟姐妹组件之间的通信

Question

我的App.js中有此设置：

<div class=container>
 <PlayerElement className="main" name="Mark" state="NY" />
 <PlayerElement className="secondary" name="Andrew" state="CA" />
</div>

类名称为 secondary 的 PlayerElement 与 main 相同。只有它是隐藏的，并且位于 main 上方的右上方。这是由自己的CSS类定义的。 当您单击第一个 PlayerElement 时，它应将其自身的不透明度设置为0.5，并出现 secondary 。再次单击时，它应恢复为先前的状态。

我在思考如何在两个相同的同级之间传递属性时遇到麻烦。 我不确定是否应该像这样安排我的应用，或者是否有更好的方法。