有人能告诉我如何在 react 中动态创建引用吗？
例如我有
<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，并将其转换为 Canvas ，然后使用它转换为图像。
我已经对一张图像执行了此操作，但要动态执行此操作，我也必须动态创建这些引用，从而能够引用它们。
那么，我该怎么做呢？
编辑:实际上我必须动态创建 img 标签并为这些标签创建引用，因为我想从 Canvas 创建 dataurl 并将其显示在图像标签中。
最佳答案
使用回调模式动态定义引用很容易，只需在构造函数中将类变量指定为空对象，然后在映射它时设置引用，就像
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 等方式访问它们
关于reactjs - 如何在reactjs中动态创建 Canvas 并动态添加引用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50598423/