如何在 React 中的两个元素之间渲染？

Question

原文如下HTML：

<div class="chat">
    <div class="uploadArea">
        ...
    </div>
    <section class="title">
        ...
    </section>
    <div class="content">
        ...
    </div>
</div>

我想渲染 title 和 content 之间的组件。我该怎么做？

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

不会真的有用吧？

Answer 1

创建一个元素，您可以将其用作反应应用程序的容器。将创建的元素插入到您想要的位置，如本例中的 after .title 元素。

然后在 ReactDOM.render 调用中使用创建的元素。

React 17 及以下：

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

target.after(reactContainer);

ReactDOM.render(Component, reactContainer);

React 18 及以上：

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

target.after(reactContainer);

const root = createRoot(reactContainer);
root.render(Component);

如何在 React 中的两个元素之间渲染？

How to render between two elements in React?

html

javascript

dom

reactjs

React 17 及以下：

React 18 及以上：