Reactjs 在父子孙辈层次结构中将焦点设置为孙辈

我有一个典型的父->子->孙层次结构的

React

组件。当我单击父组件中的链接时，我想将焦点设置为孙子组件中的文本框

我的第一次尝试是通过父对象的

道具传递
回调
函数，然后是子对象，最后是孙子对象。然后，孙子调用回调，将其
ref
属性传递给回调。该引用随后由父组件存储，以便在父组件中单击链接时，它可以使用被引用的子组件的
getDOMNode
，只需调用
focus（）
即可设置其焦点。这种配置有效

但是我不喜欢通过子组件中的
prop
传递回调。子组件不需要这个
prop
，只是将它传递给孙子。AFAIK这是一个典型的
React
问题。如果以后某个时候我在孩子和孙子之间增加了另一个等级，我必须记住
让它也通过
prop
（并更改我的测试！）

然后我想，
FLUX
模式能帮我吗？
FLUX
的优点之一不是解耦这些层次结构之间的依赖关系吗？我已经在使用
回流
作为此应用程序的一部分，为什么不使用它呢。当子组件装载时，它可以将其
ref
值放置到
回流
存储中，当单击父链接时，它从存储中获取该值并调用
。focus

然后我意识到我实际上是在呈现一个列表。因此，列表中的一个项目由父->子->孙子组成，然后列表中的下一个项目由另一个父->子->孙子组成，等等。。。问题是
FLUX
存储是单例的。因此，在渲染每个孙子时，它会将其
ref
值传递给存储，并覆盖上一个值。然后我想好了，我将在存储中使用一个项目数组，这样我可以存储每个孙子的
ref
，当在父级中单击链接时，它可以在数组中查找相应的孙子并将焦点设置为它

我的问题是，（我们终于到了：）

这是否合理的做法
我应该为这种行为使用
FLUX
stores吗？i、 e.将
ref
值存储在
FLUX
存储中
我可能会使用一个简单的全局事件管理器来集中解决这个问题。传递引用会破坏封装。焦点不是真正的状态，因为它只是设定并忘记。启动一个具有唯一Id的事件，其中一个可聚焦的孩子可以唯一地聆听。也许我没有正确理解这个问题，但我不明白为什么你不能将一些东西从祖父母传给父母传给孩子？例如，在多个孙子的情况下，仅通过id引用他们。例如，祖父母通过类似
focusChild={3}
的道具告诉父母，然后，父对象对该道具做出反应，并向子对象发送类似于
forceFocus
的道具，子对象依次检查
组件上的该道具，然后将接收道具
，并调用
this.getDOMNode（）.focus（）
？