Next.js条件渲染报错：多组件代码块无法正常运行

问题出在JSX的语法规则：React（以及基于React的Next.js）要求组件的返回值或条件分支的返回内容必须是单个根元素，不能直接并列多个元素。你第二个例子里的条件渲染分支直接返回了两个<Text>组件，违反了这个规则，所以会报错。

下面是三种可行的解决方式：

1. 使用React Fragment（推荐） #

Fragment不会在DOM中生成额外的节点，是最轻量化的解决方案：

const MyComponent = () => {
  return (
    <h1>Hello world</h1>

    {isTrue ? (
      <>
        <Text>Component 1</Text>
        <Text>Component 2</Text>
      </>
    ) : 'No component'}
  )
}

也可以写成完整的<React.Fragment>标签，效果一致。

2. 使用普通容器元素 #

如果不介意多一层DOM节点，可以用<div>或其他HTML标签包裹：

const MyComponent = () => {
  return (
    <h1>Hello world</h1>

    {isTrue ? (
      <div>
        <Text>Component 1</Text>
        <Text>Component 2</Text>
      </div>
    ) : 'No component'}
  )
}

3. 返回元素数组 #

将多个元素放在数组中返回，但必须给每个元素添加唯一的key属性：

const MyComponent = () => {
  return (
    <h1>Hello world</h1>

    {isTrue ? (
      [
        <Text key="component-1">Component 1</Text>,
        <Text key="component-2">Component 2</Text>
      ]
    ) : 'No component'}
  )
}

另外注意：你代码里的Hello word是拼写错误，建议修正为Hello world。

内容的提问来源于stack exchange，提问作者Anderson Ferreira