Question

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

我正在这样做，所以我可以在无尽的跑步者风格游戏（没有画布）中跟踪碰撞检测的元素（从状态生成）。

我已经尝试了3种不同的方法并且重要的是我应该ref=ref()时应该是ref=“tango”（根据州）。图片在这里 - https://i.imgur.com/oeStcHb.png

编辑：对于将来的其他人，我已经了解到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>
)}

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

任何帮助将不胜感激！

Answer 1

定义function for a ref并将refs存储在类变量对象中，如

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>
  );
 }

您可以阅读有关Refs和Dom Here

的更多信息

使用.map（）生成带Refs的元素

1 个答案: