迹忆客 专注技术分享

当组件返回多个元素时，出现 React.js 错误“JSX 表达式必须有一个父元素”。 要解决该错误，请将元素包装在父 div 元素中或使用片段，例如 <><h2>One</h2><h2>Two</h2></>。

下面是一个产生上述错误的示例

export default function App() {
  // ⛔️ JSX expressions must have one parent element.
  return (
    <h2>One</h2>
    <h2>Two</h2>
  );
}

上面示例中的问题是 App 组件返回多个元素。

一个组件不能返回多个元素，就像一个函数不能返回多个值一样（除非它们被包装在一个数组中，这是一个单一的值）。

解决错误的一种方法是使用 react 片段。

export default function App() {
  return (
    <>
      <h2>One</h2>
      <h2>Two</h2>
    </>
  );
}

当我们需要在不向 DOM 添加额外节点的情况下对子列表进行分组时，会使用片段。

我们可能还会看到使用了更冗长的片段语法。

import React from 'react';

export default function App() {
  return (
    <React.Fragment>
      <h2>One</h2>
      <h2>Two</h2>
    </React.Fragment>
  );
}

上面的两个示例实现了相同的结果——它们对子元素列表进行分组，而不向 DOM 添加额外的节点。

现在大多数代码编辑器都支持更简洁的语法。

另一种解决方案是将我们的子元素包装在另一个 DOM 元素中，例如 一个 div。

export default function App() {
  return (
    <div>
      <h2>One</h2>
      <h2>Two</h2>
    </div>
  );
}

这解决了错误，因为我们现在返回一个包含多个子元素的单个 div 元素，而不是返回多个元素。

这种方法仅在添加额外的 div 不会破坏我们的布局时有效，否则使用片段，因为片段不会向 DOM 添加任何额外标记。

如果其中一个代码路径返回同一级别的多个元素，我们可能还会看到错误发生在条件语句中。

export default function App() {
  return (
    <div>
      {/* ⛔️ JSX expressions must have one parent element.ts(2657) */}
      {true ? (
        <h2>One</h2>
        <h2>Two</h2>
      ) : null}
    </div>
  );
}

三元运算符的truthy路径返回2个同级元素，导致错误。 我们可以通过用片段包装这两个元素来解决这个问题。

export default function App() {
  return (
    <div>
      {true ? (
        <>
          <h2>One</h2>
          <h2>Two</h2>
        </>
      ) : null}
    </div>
  );
}

现在三元的每个代码路径都返回一个值。

“JSX 表达式必须有一个父元素”错误的原因是从函数返回多个值的语法无效。

React 组件只是函数，所以当我们在同一层级返回多个元素时，实际上是在一个函数的同一层级使用多个 return 语句。

function render() {
  return React.createElement('h2', null, 'One');
  return React.createElement('h2', null, 'Two');
}

第二个 return 语句不可访问，这是无效语法。

另一方面，当我们用片段或另一个元素包装元素时，该函数只返回一个值，这解决了错误。

我们可能会看到的另一种方法是将元素分组到一个数组中。

export default function App() {
  return [<h2 key={0}>One</h2>, <h2 key={1}>Two</h2>];
}

该数组是单个值，因此错误已解决，但是我们需要将唯一的 key prop 传递给每个数组元素。

这是不必要的，应该避免，因为片段语法更具可读性和直观性。

export default function App() {
  return (
    <>
      <h2>One</h2>
      <h2>Two</h2>
    </>
  );
}