React中继承第三方组件后如何访问内部输入框并设置焦点？

我来帮你梳理几种可行的方案——因为没法访问Widget的内部实现，咱们只能从外部DOM或组件实例的公共接口入手：

方案1：直接通过DOM选择器定位输入框 #

如果第三方组件渲染的输入框有可识别的id、class，或者能通过组件的容器DOM来定位，直接用原生DOM查询是最直接的方式。componentDidMount阶段组件已经挂载完成，DOM结构是稳定的：

componentDidMount() {
  // 示例：通过组件容器的class + 输入框的位置来定位
  const targetInput = document.querySelector('.widget-wrapper input:nth-child(1)');
  // 或者如果输入框有唯一id
  // const targetInput = document.getElementById('widget-first-input');
  
  if (targetInput) {
    targetInput.focus();
  }
}

⚠️ 注意：这种方案依赖组件的DOM结构，如果后续组件更新时DOM结构变化，代码可能失效，属于应急的权宜之计。

方案2：用ReactDOM.findDOMNode遍历组件DOM #

可以借助ReactDOM.findDOMNode获取当前组件对应的DOM节点，再从中查找内部输入框：

import ReactDOM from 'react-dom';

componentDidMount() {
  const widgetRootDom = ReactDOM.findDOMNode(this);
  if (!widgetRootDom) return;

  // 获取组件内所有输入框，按需选择目标
  const inputList = widgetRootDom.querySelectorAll('input');
  if (inputList.length >= 1) {
    inputList[0].focus(); // 假设第一个是你需要的输入框
  }
}

⚠️ 注意：findDOMNode在React StrictMode下会被标记为过时，如果你的项目启用了StrictMode，建议谨慎使用。

方案3：用MutationObserver监听动态渲染的输入框 #

如果Widget是异步加载或动态生成输入框的，componentDidMount时输入框可能还没出现在DOM里。这时候可以用MutationObserver监听DOM变化，直到目标输入框出现再设置焦点：

import ReactDOM from 'react-dom';

componentDidMount() {
  const widgetRootDom = ReactDOM.findDOMNode(this);
  if (!widgetRootDom) return;

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    const targetInput = widgetRootDom.querySelector('input');
    if (targetInput) {
      targetInput.focus();
      observer.disconnect(); // 找到后停止监听，避免重复触发
    }
  });

  // 监听组件根节点的子元素变化（包括子树）
  observer.observe(widgetRootDom, {
    childList: true,
    subtree: true
  });

  // 把观察者存到实例上，方便卸载时清理
  this.observer = observer;
}

componentWillUnmount() {
  // 组件卸载时断开观察者，防止内存泄漏
  if (this.observer) {
    this.observer.disconnect();
  }
}

这种方案更健壮，能处理异步渲染的场景，但代码稍复杂。

方案4：尝试调用组件的公共方法（如果存在） #

有些第三方组件会暴露控制焦点的公共方法，或者支持autoFocus这类props。你可以先打印组件实例看看有没有可用的属性/方法：

componentDidMount() {
  // 打印实例，看看有没有类似focusFirstInput的方法
  console.log(this);
  
  // 尝试调用可能存在的公共方法
  if (this.focusFirstInput) {
    this.focusFirstInput();
  }
  
  // 也可以检查组件是否支持相关props，比如在渲染时传入
  // <MyClass autoFocusFirstInput />
}

如果组件有官方文档，优先查看文档有没有官方支持的焦点控制方式，这是最可靠的方案。

内容的提问来源于stack exchange，提问作者kharandziuk