How to render between two elements in React?-CodePudding

Here's the original HTML:

<div >
    <div >
        ...
    </div>
    <section >
        ...
    </section>
    <div >
        ...
    </div>
</div>

I want to render a component between the title and the content. How can I do that?

ReactDOM.render(Component, document.getElementsByClassName("chat")[0]);

wouldn't really work, right?

CodePudding user response：

Create an element which you can use as the container for you react application. Insert the created element in the position you want, like in this example after the .title element.

Then use the created element in the ReactDOM.render call.

const reactContainer = document.createElement('div');
const target = document.querySelector('.chat .title');

target.after(reactContainer);

ReactDOM.render(Component, reactContainer);