ReactJS父组件动态创建函数式子组件Ref报错咨询

首先，你遇到的'heroRegion is not defined'报错原因很明确：你在模板字符串里误用了未声明的变量heroRegion。你原本想要生成heroRegion0、heroRegion1这样的属性名，但错误地把heroRegion当成变量来引用了——实际上它应该是一个字符串常量，直接写在模板字符串里就行。

第一步：修复基础报错 #

把父组件里的map代码修改成这样：

{
  [
    { class: "light", copy: "first div" },
    { class: "dark", copy: "second div" }
  ].map((hero, i) => (
    // 把${heroRegion}改成直接写heroRegion，因为它是字符串常量
    <Hero 
      key={i} // 别忘了加key，React列表渲染要求
      heroRef={el => (this[`heroRegion${i}`] = el)} 
      class={hero.class} 
      copy={hero.copy} 
    />
  ))
}

修改后，你就能通过this.heroRegion0、this.heroRegion1（注意数组索引从0开始，如果需要从1开始，把i改成i+1）访问对应的Hero组件Ref了。

第二步：更优雅的Ref管理方案（推荐） #

硬编码命名heroRegion1、heroRegion2的方式扩展性很差——如果以后新增更多Hero组件，你还要手动调整命名规则。更推荐用数组来统一存储所有Ref：

1. 在父组件的构造函数里初始化一个数组：

constructor(props) {
  super(props);
  this.heroRefs = []; // 专门用来存储所有Hero组件的Ref
}

2. 在渲染列表时，把Ref存入数组：

{
  [
    { class: "light", copy: "first div" },
    { class: "dark", copy: "second div" }
  ].map((hero, i) => (
    <Hero 
      key={i}
      heroRef={el => (this.heroRefs[i] = el)} 
      class={hero.class} 
      copy={hero.copy} 
    />
  ))
}

之后你可以通过this.heroRefs[0]、this.heroRefs[1]来访问对应的Ref，新增组件时完全不用修改Ref相关的逻辑，维护起来更方便。

可选：用React官方的Ref转发规范优化子组件 #

你现在通过heroRef props传递Ref的方式是可行的，但React提供了更规范的React.forwardRef API来做Ref转发，能让代码更清晰：

修改子组件Hero：

import React from 'react';
// 用forwardRef接收父组件传递的ref
const Hero = React.forwardRef((props, ref) => (
  <div ref={ref} className={`hero-region ${props.class}`}>
    <h3>{props.copy}</h3>
  </div>
));
export default Hero;

然后父组件里直接传递ref prop即可：

<Hero 
  key={i}
  ref={el => (this.heroRefs[i] = el)} 
  class={hero.class} 
  copy={hero.copy} 
/>

这样的写法更符合React的设计规范，也让Ref传递的逻辑更直观。

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