如何解決 React.js 中的「相鄰 JSX 元素必須包裹在封閉標籤中」？

解析錯誤：解決「相鄰JSX 元素必須包裹在封閉標籤中」

嘗試在React.js 應用程式中條件渲染元件時，開發人員可能會遇到錯誤「解析錯誤：相鄰的JSX 元素必須包含在封閉標記中。」當多個JSX 元素直接相鄰放置而不包含在父組件中時，就會發生這種情況。

可以透過確保所有JSX 元素都包含在單一父元件中來修復該錯誤，如下所示：

// Incorrect: Adjacent JSX elements will result in a parse error
return (
  <Comp1 />
  <Comp2 />
);

// Correct: Enclose elements within a parent component
return (
  <div>
    <Comp1 />
    <Comp2 />
  </div>
);

或者，可以利用React.Fragment API 建立虛擬父元件，而無需添加額外的DOM 節點：

// Fragments allow for grouping JSX elements without adding nodes to DOM
return (
  <React.Fragment>
    <Comp1 />
    <Comp2 />
  </React.Fragment>
);

透過將相鄰的JSX 元素封裝在適當的父元件中，開發人員可以解決「相鄰的JSX元素必須封裝在封裝標籤中」錯誤，並確保其React 應用程式如預期呈現。

以上是如何解決 React.js 中的「相鄰 JSX 元素必須包裹在封閉標籤中」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！