Estoy tratando de apuntar a un nodo específico en mi componente reutilizable de reacción y realizar una operación en él. Pero quiero poder hacer lo mismo varias veces de forma independiente porque devolveré este componente reutilizable varias veces en la misma página en mi App.js. ¿Cómo me dirijo a ese nodo div de forma única?

Aquí está mi situación:

Creé un componente de clase de reacción (no estoy usando el componente de función para este proyecto). Este componente contiene dos divs y un botón. El primer div es un cuadro rojo. Debajo está el segundo div que está vacío con la clase "resultado". También hay un botón. Cuando hago clic en este botón, el paquete Html2Canvas convertirá el primer div en una imagen y lo agregará al segundo div.

Ahora, a partir de la documentación de Html2Canvas, solo especificaron cómo agregar el lienzo generado al cuerpo del DOM:

 html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });

Como necesitaba agregar a ese segundo div vacío, lo hice:

 html2canvas(document.querySelector("#capture")).then(canvas => { document.queryselector('.result').appendChild(canvas) });

Esto habría estado bien si solo estoy usando este componente una vez en una página, pero en mi App.js, en realidad estoy devolviendo este mi componente varias veces, así que lo que sucede ahora es que cada vez que hago clic en ese botón, apunta solo la primera instancia del vacío, mientras que lo que necesito es que cada aparición de mi componente se comporte como la primera de forma independiente.

Sí, he intentado usar CreateRef() para apuntar a la aparición actual de la inmersión vacía, pero no funciona. Ve la referencia como indefinida cuando la llamo dentro de la función Html2Caanvas. Pero fuera de ella, se define. Ok, intenté crear la referencia en el interior, todavía dio un error de indefinido.

Entiendo que todo esto que he escrito puede ser algo vago, así que aquí hay un ejemplo de CodeSandBox de lo que quiero.

Cuando lo abre y hace clic en el primer botón "Finalizar", verá que el cuadro rojo se convierte en una imagen y la imagen se agrega debajo del cuadro rojo, es decir, se agrega al div con la clase "resultado". ". Pero cuando hace clic en el segundo botón "Finalizar", en lugar de que la imagen generada del cuadro azul quede debajo del div del cuadro azul, va debajo o al lado de la imagen anterior. El comportamiento esperado es que aparezca debajo del cuadro azul. Y si replico ese componente "ReUsable" tantas veces como quiera en el App.js, se espera el mismo comportamiento. Independencia.

Sé que esto es mucho. Espero y agradezco sus soluciones.