Как динамически создать холст в реакции и динамически добавлять ссылки?

Question

Может кто-нибудь сказать мне, как создавать ссылки реагировать динамически?

Например, у меня есть

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

Итак, я могу это сделать или есть другой способ сделать это?

В основном я получаю URL-адреса pdf с сервера, который я конвертирую в canvas, а затем визображение, использующее его.

Я уже сделал это для одного изображения, но чтобы сделать это динамически, мне нужно будет также динамически создавать эти ссылки и, таким образом, иметь возможность ссылаться на них.

Итак, какмне сделать это?

РЕДАКТИРОВАТЬ: На самом деле мне нужно создавать теги img слишком динамически и создавать ссылки для них тоже, как я хочу создать dataurl из холста и отображать его в тегах изображений.

Answer 1

Легко определить refs динамически, используя шаблон обратного вызова, просто укажите переменную класса для пустого объекта в конструкторе, а затем установите 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

Вы можете использовать карту, если у вас есть массив canvas.

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

Вы можете получить к ней доступ как:

this.refs[canvas0];