為什么要指定一個 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

我看到 React 在返回多個元素的 JSX 代碼時會引發錯誤，因此它需要始終使用以下 3 個選項包裝這些元素：

<>
<React.Fragment>
<div>

例如這個有效：

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

代替：

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

Answer 1

JSX 被編譯成React.createElement() 。

<div>Test</div>

相當於

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

由於React.createElement()僅創建組件所需的單個元素，因此 JSX 表達式必須具有一個元素。

Answer 2

根據反應：

React 中的一個常見模式是組件返回多個元素。 片段讓您可以對子列表進行分組，而無需向 DOM 添加額外的節點。

這意味着 React 需要單個根元素，例如單個<div></div>

現在，如果你使用多個<div></div>這實際上不是 React 所期望的，為了消除這個問題，React 引入了<React.Fragment></React.Fragment>或簡寫形式<></>這將啟用您可以將多個子組件分組到單個<div></div>中，該 <div></div> 已在父組件中的 App 組件中清除。