有没有办法避免在 React 中有两个 "root" 元素？

Question

通常您必须在模板中放置一个根元素，例如<div id="root"></div>。然后使用 React/jsx，将组件（及其子组件）渲染为 root。该组件（渲染时）可能看起来像这样 <div id="main-wrapper">。最终渲染将有两个根，一个称为 root，一个称为 main-wrapper。有没有更简洁的 React 渲染方式？

而不是这个：

<div id="root">
    <div id="main-wrapper>
        <section></section>
        <section></section>
        . . .
    </div>
</div>

我可以这样做吗？

<div id="root">
    <section></section>
    <section></section>
    . . .
</div>

Answer 1

您可以 return 来自顶级组件的 fragment 而不是顶级元素：

const App = () => {
    return <>
        <section>stuff</section>
        <section>goes</section>
        <section>here</section>
    </>;
};

之前：

const App = () => {
    return <div id="main-wrapper">
        <section>stuff</section>
        <section>goes</section>
        <section>here</section>
    </div>;
};

ReactDOM.render(<App/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

之后：

// Stack overflow's Stack Snippets Babel is so massively out of date that I have to use
// <React.Fragment>...</React.Fragment> rather than <>...</>, but that's just for the
// on-site snippet.
const App = () => {
    return <React.Fragment>
        <section>stuff</section>
        <section>goes</section>
        <section>here</section>
    </React.Fragment>;
};

ReactDOM.render(<App/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

有没有办法避免在 React 中有两个 "root" 元素？

Is there a way to avoid having two "root" elements in React?

jsx

reactjs

react-dom