Reactjs 在React应用程序中使用浏览器API而不是ref进行焦点管理？

我需要在React应用程序中管理焦点。我需要在父组件中侦听事件，并将重点放在嵌套较深的子组件上

我知道最好的做法是使用裁判，但事实证明这很复杂。遗憾的是，我们的应用程序非常混乱，通过嵌套组件、Redux表单等进行大量间接寻址

在React之外简单地使用

getElementById

代码要少得多，对我来说效果很好：

class Parent extends React.Component {
  componentDidMount() {
    const elem = document.getElementById('child-input-ID');
    elem.focus();
  }

---

然而，这是一个稳健的解决方案吗？一位同事告诉我，通过虚拟DOM进行到期更新这种方法可能不可靠，但我想我在她的前端硕士课程中看到Marcy Sutton这样做：

如果许多嵌套组件是最大的障碍，也许你可以使用

上下文API

通过

ref

？所有这些想法都会导致技术债务，所以请尽快尝试重构。修复React代码库有时比最初看起来更容易。

如果许多嵌套组件是最大的障碍，也许您可以使用

上下文API

来通过

ref

？所有这些想法都会导致技术债务，所以请尽快尝试重构。修复React代码库有时比最初看起来要容易。

FocusManager:FocusManager：即使这纯粹是为了我自己的利益，你能告诉我我的解决方案有什么问题吗？您必须确保#child input ID匹配，但有办法做到这一点。即使这纯粹是为了我自己的利益，您能告诉我我的解决方案有什么问题吗？您必须确保#子输入ID匹配，但有办法做到这一点。