2

谁能告诉我如何在动态反应中创建参考？

例如，我有 

<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 url，我将其转换为画布，然后使用它转换为图像。

我已经为一张图片完成了这项工作，但要动态地执行此操作，我也必须动态地创建这些 refs，从而能够引用它们。

那么，我该怎么做呢？

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

4

2 回答 2

2

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

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依此类推

于 2018-05-30T07:25:28.683 回答
1

如果您有一组画布，则可以使用地图。

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

你可以像这样访问它：

this.refs[canvas0];
于 2018-05-30T07:19:05.633 回答