Question

有人能告诉我如何动态地创建refs吗？

例如，我有

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

我想更动态地创建。

像这样：

<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>

那么，我可以这样做，还是有另一种方法可以做到这一点？

基本上我从服务器获取pdf网址，我将转换为画布，然后使用它进行图像处理。

我已经为一个图像做了这个，但为了动态地这样做，我将不得不动态创建这些引用，从而能够引用它们。

那么，我该怎么做？

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

Answer 1

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

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.canvas1，this.canvasRefs.canvas2等方式访问它们

Answer 2

如果你有一个画布数组，你可以使用map。

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

您可以像访问它一样访问它：

this.refs[canvas0];

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

2 个答案: