如何在reactjs中动态创建画布并动态添加引用？

谁能告诉我如何在react Dynamics中创建引用

例如，我有

<canvas style={{display:'none'}} ref={(el) => this.image = el} > </canvas>

this.image=el}>

我想创建更动态的

像这样：

<canvas style={{display:'none'}} ref={(el) => this.image1 = el} > </canvas>
<canvas style={{display:'none'}} ref={(el) => this.image2 = el} > </canvas>
<canvas style={{display:'none'}} ref={(el) => this.image3 = el} > </canvas>

this.image1=el}>
this.image2=el}>
this.image3=el}>

那么，我能做到这一点吗，还是有别的办法

基本上，我从服务器上获取pdf url，然后使用它将其转换为画布和图像

我已经为一个图像做了这项工作，但要动态地完成这项工作，我还必须动态地创建这些引用，从而能够引用它们

那么，我该怎么做呢

---

编辑：实际上，我必须太动态地创建img标记，并为这些标记创建引用，因为我想从画布创建dataurl并将其显示在图像标记中。

如果您有画布数组，则可以使用map

this.props.canvases.map((value,index)=>
<canvas ref={'canvas'+index}></canvas>
)

---

使用回调模式动态定义引用很容易，只需在构造函数中为空对象指定一个类变量，然后在映射时设置引用，就像

constructor(props) {
   super(props);
   this.canvasRefs = {}
}

this.props.canvases.map((value,index)=> {
     let id = index;
     return <canvas ref={(ref) => this.canvasRefs[`canvas${id}`] = ref}></canvas>
})

构造函数（道具）{
超级（道具）；
this.canvasRefs={}
}
this.props.canvases.map（（值，索引）=>{
设id=索引；
返回这个.canvasRefs[`canvas${id}`]=ref}>
})

---

您可以通过

this.canvasRefs.canvas1

，

this.canvasRefs.canvas2

等方式访问它们。好吧，我所说的引用是回调引用，如ref={（el）=>this.image3=el}如何动态创建这些画布？你在映射它吗？你是说上面提到的映射函数吗？我可以这样做并创建字符串引用，但这些引用很快就会被弃用。这就是为什么我想用callback ref，我明白你的意思了ref={（索引）=>index}`。您可以尝试这样做，然后您的意思是映射它并使用map中的索引？？this.canvasRefs={}在构造函数帮助中如何？我们将refs保存为object中的键值对，因此，您可以像编写

this.cavas1、this.canvas2

那样来考虑它，而不是编写

this.canvasRefs={canvas1:refInstance，canvas2:refInstance}

，如果不初始化空对象，则会在

this.canvasRefs[`canvas${index}`]

中出现错误。我一直在尝试。但当我尝试访问时。我总是这样。canvasRefs={}虽然我可以看到画布和图像标签的创建方式和时间，但里面什么都没有。当一个模态打开时，我实际上正在这样做。因此，画布元素被创建，然后我尝试在承诺范围内访问它们。但可能在创建后不久尝试访问它，它可能还无法获得新数据。也许这就是它找不到它的原因。但如果你有任何想法。请建议。

constructor(props) {
   super(props);
   this.canvasRefs = {}
}

this.props.canvases.map((value,index)=> {
     let id = index;
     return <canvas ref={(ref) => this.canvasRefs[`canvas${id}`] = ref}></canvas>
})