为什么要指定一个 wrap 元素：<div> 或者<react.fragment>或 JSX 中的 &lt;&gt; 返回？</react.fragment></div><div id="text_translate"><p> 我看到 React 在返回多个元素的 JSX 代码时会引发错误，因此它需要始终使用以下 3 个选项包装这些元素：</p><pre> &lt;&gt; &lt;React.Fragment&gt; &lt;div&gt;</pre><p> 例如这个有效：</p><pre> const myReactComponent = () =&gt; { return ( &lt;div&gt; &lt;div&gt;Div 1&lt;/div&gt; &lt;div&gt;Div 2&lt;/div&gt; &lt;/div&gt; ) }</pre><p> 代替：</p><pre> const myReactComponent = () =&gt; { return ( &lt;div&gt;Div 1&lt;/div&gt; &lt;div&gt;Div 2&lt;/div&gt; ) }</pre></div>

Question

I see React raises errors when returning JSX codes for multiple elements, so it requires to always wrap those elements using these 3 options:

<>
<React.Fragment>
<div>

eg this one works:

const myReactComponent = () => {
   return (
     <div>
       <div>Div 1</div>
       <div>Div 2</div>
     </div>
   )
}

instead of:

const myReactComponent = () => {
   return (
       <div>Div 1</div>
       <div>Div 2</div>
   )
}

Answer 1

JSX is compiled down to React.createElement() .

<div>Test</div>

is equivalent to

React.createElement('div', 'Test');

Since React.createElement() only creates a single element which is required by the component, JSX expressions must have one element.

Answer 2

According to React :

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

Which means React expects a single root element like a single <div></div>

Now if you use multiple <div></div> this is not actually expected by React, to eliminate this problem React introduces <React.Fragment></React.Fragment> or in short form <></> and this will enable you to group multiple child components within a single <div></div> that is already decleared in App component on in your parent component.