Necesito una forma de agregar mi componente de reacción a la pantalla, para cada lugar que encuentren la identificación "#tarjeta".
const container = document.querySelectorAll('#card'); ReaactDOM.render(<App />, container);El código anterior no representa nada en la página. Con el error: Error no detectado: el contenedor de destino no es un elemento DOM. Investigué y descubrí que querySelectorAll solo devuelve una lista de nodos que necesito repetir. Sin embargo, todos los intentos que he intentado no funcionan.
No estoy seguro si quuerySelectorAll es la opción correcta. O si necesito arreglar cómo lo estoy llamando.
const App = () => { return ( <div class="card_container"> {console.log(cards)} {cards.map() => { <div>{cardNumber}</div> } </div> ); }; for (const el of document.querySelectorAll(".react-container")) { ReactDOM.render(<App/>, el); } [Stack 1] [Stack 2] [Stack 2] [Stack 3] [Stack 3] [Stack 3]En realidad, debe iterar la matriz que devuelve querySelectorAll . Tampoco debe duplicar la id dentro de una página.
const App = () => { return ( <div>I'm a React app!</div> ); }; for (const el of document.querySelectorAll(".react-container")) { ReactDOM.render(<App/>, el); } <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class="react-container"></div> <div class="react-container"></div> <div class="react-container"></div> <div class="react-container"></div>