相邻的 JSX 元素必须包含在封闭标记中

如果有人在 React 库的渲染方法中使用多个 HTML 元素，则会显示一个错误，指定相邻的 JSX 元素必须包含在封闭标记中。错误的原因是当我们使用 render 方法时它只能接受一个 HTML 元素。这意味着如果您在 render 方法中有两个或多个 HTML 元素背靠背，那么它将无法工作并显示错误。因此，要修复此错误，可以将所有 HTML 元素嵌入到单个 div 元素中。 div 中的任何内容都将被视为单个 HTML 元素。

句法 ：

ReactDOM.render(

  // now one can use more than one html 
  // element inside div element.
,
  document.getElementById("root)
 ); 

示例 1：当我在渲染方法中使用多个 HTML 元素时：

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  
Geeks For Geeks
    
Learn Programming 
  
  document.getElementById('root')
);

输出：我收到一个错误，指定必须将相邻的 JSX 元素包装在封闭标记中。要修复此错误，

和

标记必须包含在单个 HTML 元素中，例如

标记。

示例 2：当我在渲染方法中使用单个 HTML 元素时：

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
  
ReactDOM.render(
  

  
Geeks For Geeks
    
Learn Programming 
  
  
,
  document.getElementById('root')
);

输出：我得到了没有错误的预期输出，因为在渲染方法中

和

标记被包装在单个 div HTML 元素中，并且任何进入 div 的内容都将计为单个 HTML 元素。