Javascript 使用.map（）生成带有引用的元素

使用.map（）输出带有refs的元素有没有最好的方法

我这样做是为了在无休止的跑步者风格的游戏（没有画布）中跟踪碰撞检测的元素（从状态生成）

我尝试了3种不同的方法，不管我做什么，我似乎都会得到

ref=ref（）。图片在这里-

编辑：对于将来的其他人，我已经了解到，
ref=ref（）
是一种预期行为，用于指示回调与之关联，而不是显示实际ref的旧方式

正在使用的代码-

this.state = {
   people: {
      tango: { height: 10, weight: 200 },
      cash: { height: 20, weight: 300 }
   }
};
...
outputStatePeople(key) {
    return(<span className="db" key={key} ref={key}>name: {key}</span>)
}
...
render() { return (
<div>
    {Object.keys(this.state.people).map(key => this.outputStatePeople(key))}
</div>
)}

this.state={
人民:{
探戈：{身高10，体重200}，
现金：{身高20，体重300}
}
};
...
outputStatePeople（键）{
返回（名称：{key}）
}
...
render（）{return(
{Object.keys（this.state.people）.map（key=>this.outputStatePeople（key））}
)}

上面使用了一个函数来生成dom，但在输出内联html和使用组件时也会发生这种情况

任何帮助都将不胜感激 为ref定义一个
函数，并将ref存储在类变量对象中，如

constructor(props) {
  super(props);

  this.state = {
     people: {
        tango: { height: 10, weight: 200 },
        cash: { height: 20, weight: 300 }
     }
  };
  this.domRefs = {};
}
outputStatePeople(key) {
  return (
     <span className="db" key={key} ref={(ref) => {this.domRefs[key] = ref}}>
        name: {key}, height: {this.state.people[key].height}
     </span>
  );
 }

构造函数（道具）{
超级（道具）；
此.state={
人民:{
探戈：{身高10，体重200}，
现金：{身高20，体重300}
}
};
this.domRefs={}；
}
outputStatePeople（键）{
返回(
{this.domRefs[key]=ref}}>
姓名：{key}，高度：{this.state.people[key].height}
);
}

您可以阅读有关ref和Dom的更多信息。
ref
需要成为@Neoares ty的函数以提供帮助！仍然不走运-相同的
ref=ref（）
输出感谢您的帮助！我已经在这里尝试过了-但是没有运气，仍然是相同的问题
ref=ref（）
@Ash，refs不会给你refs，但是如果你使用console.log（this.domRefs），你会看到那里的所有组件啊，我看到了，谢谢，伙计，这看起来正在工作！我还发现我可以使用像
key={ref}
这样的字符串ref，而不需要
domRefs
对象。这是个好主意吗？代码在这里-React docs建议您不要使用字符串引用，它们也不推荐使用。根据键，选中此答案。反应键组件在迭代器中必须是唯一的。