為什麼我在 React 中收到「解析錯誤：相鄰的 JSX 元素必須包裹在封閉標籤中」？

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

問題：

問題：嘗試時根據變數有條件地渲染元件，會發生錯誤：「解析錯誤：相鄰的JSX 元素必須包含在封閉標記中。」

問題：導致此錯誤的原因如何解決？

答案：在 React 中，每個組件或組件組都必須包含在單一標籤內。在提供的程式碼中，條件渲染導致相鄰的 JSX 元素（在本例中為輸入和 ReactCSSTransitionGroup 元件）在沒有封閉標籤的情況下出現。

解決方案：解決錯誤，將這些元素包裝在適當的封閉標籤中，例如

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

範例：

使用 或React.Fragment。包裝器提供了一個輕量級且語義中立的選項，用於對元素進行分組，而無需引入額外的 DOM 節點。

以上是為什麼我在 React 中收到「解析錯誤：相鄰的 JSX 元素必須包裹在封閉標籤中」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！