Aquí está el HTML original:
<div class="chat"> <div class="uploadArea"> ... </div> <section class="title"> ... </section> <div class="content"> ... </div> </div> Quiero representar un componente entre el title y el content . ¿Cómo puedo hacer eso?
ReactDOM.render(Component, document.getElementsByClassName("chat")[0]);realmente no funcionaría, ¿verdad?
Cree un elemento que pueda usar como contenedor para su aplicación de reacción. Inserte el elemento creado en la posición que desee, como en este ejemplo after del elemento .title .
Luego use el elemento creado en la llamada ReactDOM.render .
const reactContainer = document.createElement('div'); const target = document.querySelector('.chat .title'); target.after(reactContainer); ReactDOM.render(Component, reactContainer); const reactContainer = document.createElement('div'); const target = document.querySelector('.chat .title'); target.after(reactContainer); const root = createRoot(reactContainer); root.render(Component);