JSX嵌套双条件表达式的语法问题排查

嘿，我帮你排查出来问题啦！你这段嵌套双条件的JSX代码报错，主要是踩了两个JSX的语法坑：

1. 同一个条件分支里返回了多个未包裹的JSX元素 #

你外层的三元表达式是 renderSource.length > 0 ? [Form + 内层三元] : <Text>，但这里的<Form>和后面的内层条件渲染是两个独立的JSX元素，JSX规则要求一个表达式只能返回单个元素，直接把它们放在一起会让解析器搞不清结构，从而报错。

而你那个单条件能正常工作的版本，是因为<Form>是单独的顶层元素，后面的三元是另一个独立的顶层表达式，它们是兄弟关系，这种情况JSX是允许的。

2. 嵌套三元的语法边界不清晰 #

你的内层三元直接跟在<Form>后面，没有用括号明确包裹表达式范围，也会让JSX解析器出现识别混乱。

修正后的代码示例 #

我帮你调整了结构，解决了这两个问题：

<Heading size="large">Design Library Info</Heading>

{renderSource.length > 0 ? (
  {/* 用React Fragment包裹多个元素，作为单一返回值 */}
  <>
    <Form onSubmit={onSubmit}>
      <TextField label="Show depth" name="depth" type="number" defaultValue={formState.depth}/>
    </Form>
    {/* 给内层三元加括号，明确表达式范围 */}
    {`${formState.depth}` !== "0" ? (
      <Table>
        <Head>
          <Cell><Text>This design depends on</Text></Cell>
          <Cell><Text>Inherited requirements</Text></Cell>
        </Head>
        {/* 列表渲染别忘了加key，避免React警告 */}
        {renderSource.map(depEntry => (
          <Row key={depEntry.link || depEntry.title}>
            <Cell><Text><Link href={`${depEntry.link}`}>{depEntry.title}</Link></Text></Cell>
            <Cell><Text>{depEntry.req}</Text></Cell>
          </Row>
        ))}
      </Table>
    ) : (
      <Text>(Increase depth to show dependencies)</Text>
    )}
  </>
) : (
  <Text>(This design does not have dependencies)</Text>
)}

关键修正点说明 #

• 用<>（React Fragment）把外层三元的true分支里的<Form>和内层条件渲染包裹起来，让整个分支返回单一元素，符合JSX的规则。
• 给所有三元表达式加上括号，明确表达式的开始和结束边界，让代码结构更清晰，也避免解析器出错。
• 给map渲染的<Row>加上key属性，这是React列表渲染的强制要求，能避免控制台出现性能警告。

备注：内容来源于stack exchange，提问作者gctwnl