React报错：已用父元素包裹仍提示Adjacent JSX元素需外层包裹

问题根源 #

你触发报错的核心原因是条件渲染的else分支里直接返回了两个没有被单个父容器包裹的JSX元素。外层的<div>和<h1>是包裹整个组件返回内容的，但三元表达式的每个分支必须返回单个元素（或被统一包裹的一组元素）——你当前else分支里的<h1>test</h1>和<h2>There is no name</h2>是平级相邻的，没有自己的父容器，这才是报错的关键，和外层的父元素无关。

解决方案 #

方案1：用普通DOM标签包裹分支内的元素

给else分支里的两个元素套一个<div>，确保分支返回单个元素：

function App() {
  const name = "john";
  const isNameShowing = false;
  return (
    <div className="App">
      <header className="App-header">
        <h1>
          {isNameShowing ? (
            "test" // 注意：原代码的test未加引号，会被视为变量，这里改成字符串避免新错误
          ) : (
            <div>
              <h1>test</h1>
              <h2>There is no name</h2>
            </div>
          )}
        </h1>
      </header>
    </div>
  );
}

export default App; 

方案2：用React.Fragment（简写<>）包裹，避免多余DOM节点

如果不想在DOM中增加额外的<div>标签，可以用React提供的Fragment，简写形式为<>和</>：

function App() {
  const name = "john";
  const isNameShowing = false;
  return (
    <div className="App">
      <header className="App-header">
        <h1>
          {isNameShowing ? (
            "test"
          ) : (
            <>
              <h1>test</h1>
              <h2>There is no name</h2>
            </>
          )}
        </h1>
      </header>
    </div>
  );
}

export default App; 

关键说明 #

React的规则是：任何返回多个JSX元素的表达式（包括条件分支、组件返回值、映射结果等），都必须被单个父元素或Fragment包裹。外层的父元素负责包裹整个组件的输出，但表达式内部的多元素组需要单独处理，这两个层级是相互独立的。

内容的提问来源于stack exchange，提问作者Samrudh S