為什麼我收到'相鄰 JSX 元素必須包含在封閉標籤中？”

必須包含相鄰的JSX 元素

當嘗試基於狀態變數有條件地渲染組件時，必須遵守規則相鄰的JSX元素必須包含在封閉標籤內。此要求確保了 React 元件樹的有效性。

當您使用 if 語句有條件地渲染元素而沒有正確封閉它們時，就會出現問題。例如，在您的程式碼中：

if(this.state.submitted==false) {
  // ...
}

這會導致解析錯誤「相鄰 JSX 元素必須包含在封閉標記中」。要解決此問題，您必須將條件元素包裝在合適的父標記中，例如

:

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

或者，如果您希望在沒有額外包裝層的情況下顯示片段，您可以利用React 16.2 中引入的Fragments API：

return (
  <>
    {/* Conditional content here */}
  </>
);

此語法允許您將JSX 元素分組，而無需引入額外的DOM 節點。

以上是為什麼我收到'相鄰 JSX 元素必須包含在封閉標籤中？”的詳細內容。更多資訊請關注PHP中文網其他相關文章！