React函数组件返回元素数组时，如何向父组件传递Ref？

嘿，这个问题在React开发里挺常见的，咱们一步步拆解解决方案～

首先，你的Paragraphs组件现在返回的是一组<p>标签的数组，要把这些元素的Ref传递回父组件Application，主要有两种常用思路，取决于你是要拿到所有子元素的Ref还是特定子元素的Ref。

一、获取所有子元素的Ref（用forwardRef + 数组/对象存储） #

React的forwardRef可以让函数组件接收父组件传递的Ref，然后我们可以通过回调Ref把每个子元素的DOM节点存到父组件的Ref容器里。

修改后的完整代码示例： #

import React from 'react';
import _ from 'lodash';

class Application extends React.Component {
  items = ['first', 'second', 'third'];
  // 创建一个Ref容器，用来存储所有<p>标签的DOM节点
  paragraphRefs = React.createRef();

  componentDidMount() {
    // 组件挂载后，就能拿到所有<p>的Ref啦
    console.log('所有段落Ref:', this.paragraphRefs.current);
    // 比如操作第一个段落：this.paragraphRefs.current[0].style.color = 'red'
  }

  render() {
    return (
      <div>
        {/* 把Ref传递给子组件 */}
        <Paragraphs items={this.items} ref={this.paragraphRefs} />
      </div>
    );
  }
}

const renderItem = (item, index, refs) => {
  // 用回调Ref把当前<p>的DOM节点存到父组件的Ref数组里
  return <p key={index} ref={el => refs.current[index] = el}>{item}</p>;
};

// 用forwardRef包裹子组件，让它能接收父组件传递的Ref
const Paragraphs = React.forwardRef(({ items }, ref) => {
  // 初始化Ref数组（如果父组件的Ref还没初始化）
  if (!ref.current) {
    ref.current = [];
  }
  // 清空旧的Ref，避免数组长度变化时残留无效节点
  ref.current.length = items.length;
  // 遍历渲染时把Ref容器传给renderItem
  return _.map(items, (item, index) => renderItem(item, index, ref));
});

关键点说明： #

• React.forwardRef是核心，它让函数组件能接收父组件的ref属性
• 用回调Ref（ref={el => ...}）代替直接赋值，能精准把每个DOM节点存到数组对应位置
• 每次渲染前重置数组长度，防止子元素数量变化时，旧的Ref残留

二、获取特定子元素的Ref（用回调函数传递） #

如果你只需要某一个或几个特定子元素的Ref，不用传递整个Ref容器，直接给子组件传一个回调函数就行，更轻量化。

示例代码： #

import React from 'react';
import _ from 'lodash';

class Application extends React.Component {
  items = ['first', 'second', 'third'];
  // 存储第一个段落的Ref
  firstParagraphRef = null;

  // 定义一个回调函数，用来接收子组件传递的Ref
  setFirstParagraphRef = (el) => {
    this.firstParagraphRef = el;
  };

  componentDidMount() {
    console.log('第一个段落Ref:', this.firstParagraphRef);
    // 操作第一个段落：this.firstParagraphRef.style.fontWeight = 'bold'
  }

  render() {
    return (
      <div>
        {/* 把回调函数传给子组件 */}
        <Paragraphs items={this.items} setFirstRef={this.setFirstParagraphRef} />
      </div>
    );
  }
}

const renderItem = (item, index, setFirstRef) => {
  // 只给第一个<p>绑定Ref回调
  return (
    <p 
      key={index} 
      ref={index === 0 ? setFirstRef : null}
    >{item}</p>
  );
};

const Paragraphs = ({ items, setFirstRef }) => {
  return _.map(items, (item, index) => renderItem(item, index, setFirstRef));
};

关键点说明： #

• 父组件定义一个回调函数，子组件在需要传递Ref的元素上绑定这个回调
• 这种方式更灵活，适合只关注部分子元素的场景，不用维护整个Ref数组

小提醒 #

另外提一句：你的示例里用index作为key，在生产环境中如果数组元素有增删、排序变化，可能会导致React渲染异常，建议用每个元素的唯一标识作为key哦～

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