Javascript 在兄弟或远亲的React组件中处理输入焦点

我有一个组件D，它位于组件树的一个单独的、更深的分支上，作为组件E。当某个动作发生在D中（或堆栈中的任何位置）时，我想将输入集中在E中。我是否需要使用

ref

以某种方式存储输入的全局引用，或者是否有更好的方法使用sagas跨远程元素控制文档集中？

这似乎有点特别，但不知道确切的细节，但我将如何实现它-

1） “A”将“IsInputFocused”存储为状态

2） “A”具有切换上述状态值（开/关）的功能，并将此功能作为道具传递给希望在“E”上触发聚焦/模糊的任何其他组件。例如

---

4） 现在在“D”中，当某个动作发生时，只需触发从“A”传下来的ToggleFocus（），这看起来有点特别，不知道确切的细节，但下面是我将如何实现它-

1） “A”将“IsInputFocused”存储为状态

2） “A”具有切换上述状态值（开/关）的功能，并将此功能作为道具传递给希望在“E”上触发聚焦/模糊的任何其他组件。例如

4） 现在在“D”中，当某个动作发生时，只需触发从“A”传下来的ToggleFocus（）

A
|-B
| |-C
|   |-D
|
|-E
  |-input

state = {
    isEFocused: false,
};

toggleEFocus() {
    this.setState({ isEFocused: !this.state.isEFocused });
}

render() {
    <div>
        <D toggleEFocused={ ::this.toggleEFocus } />
        <E isEFocused={ this.state.isEFocused } />
    </div>
}

componentWillReceiveProps(nextProps) {
    if (nextProps.isEFocused) this._inputRef.focus();
    else this._inputRef.blur();
    // this._inputRef is the ref to the input in E
}