如何在React组件结构中访问子元素内部的元素？

首先，在React里直接操作DOM并不是推荐的常规做法，但如果确实需要访问子组件内部的元素，我们可以通过**Refs（引用）**来实现——这是React官方提供的安全、合规的方式。针对你给出的MyDictionary组件，我来一步步说明具体操作：

第一步：在父组件中存储子组件的引用 #

因为你是通过map循环生成多个SomeOtherClass实例，所以需要用一个数组来存储每个子组件的ref。我们可以在MyDictionary的构造函数里初始化这个数组，然后通过回调Ref把每个子组件的实例存进去：

修改后的MyDictionary代码：

class MyDictionary extends React.Component {
  constructor(props) {
    super(props);
    // 初始化数组，用来存储每个子组件的引用
    this.childRefs = [];
  }

  render() {
    var _this = this;
    var children = this.props.results.map((result, index) => 
      React.createElement(
        "div", { className: "col-sm-12" },
        React.createElement(SomeOtherClass, {
          key: result.id,
          name: result.name,
          index: result.index,
          activity: _this.props.index + 1,
          images: _this.props.image_labels,
          // 用回调Ref把当前子组件实例存入数组对应位置
          ref: (componentInstance) => {
            _this.childRefs[index] = componentInstance;
          }
        })
      )
    );
    return React.createElement("div", null, ...children);
  }
}

第二步：在子组件中给内部元素添加Ref并暴露访问方法 #

接下来，需要在SomeOtherClass里给你想访问的内部元素绑定ref，并且最好暴露一个公共方法让父组件安全获取这个内部元素（保持组件的封装性，不要直接暴露内部ref）：

比如SomeOtherClass的代码可以调整为：

class SomeOtherClass extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref指向需要被父组件访问的内部元素（这里以input为例）
    this.innerElementRef = React.createRef();
  }

  // 暴露公共方法，让父组件可以获取内部元素
  getInnerElement() {
    return this.innerElementRef.current;
  }

  render() {
    return React.createElement(
      "div",
      null,
      // 给内部元素绑定ref
      React.createElement("input", { ref: this.innerElementRef, type: "text" }),
      React.createElement("p", null, this.props.name)
    );
  }
}

第三步：在父组件中访问子组件的内部元素 #

现在你就可以在MyDictionary的任意方法里，通过之前存储的childRefs数组访问子组件，再调用子组件的getInnerElement方法拿到内部元素了。比如：

// 示例：给第一个子组件的内部input框设置聚焦
focusFirstInput() {
  const firstChild = this.childRefs[0];
  if (firstChild) {
    const innerInput = firstChild.getInnerElement();
    innerInput.focus(); // 调用DOM原生的focus方法
  }
}

一些重要注意事项 #

• 优先用数据驱动视图：React的核心是通过state和props控制UI变化，如果能通过状态更新实现需求，就不要用refs直接操作DOM。refs只适合处理DOM原生操作（比如聚焦、测量尺寸、滚动定位）这类场景。
• 避免在render中直接创建React.createRef()：如果在循环里直接写ref={React.createRef()}，每次render都会生成新的ref实例，导致引用失效，所以用回调Ref或者在构造函数里初始化ref数组更可靠。
• 确保组件已挂载：如果要在组件刚启动时访问refs，一定要在componentDidMount生命周期方法里操作，此时所有子组件都已经完成渲染。

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