这个问题的核心是JavaScript短路求值的特性和JSX中多元素渲染的规则共同导致的，咱们一步步拆解：

为什么<h1>不显示？ #

你写的表达式：

arr.length > 0 && <h1>Additional Text</h1> && arr.map(...)

在JavaScript中，&&运算符会从左到右依次判断：

1. 首先arr.length > 0为真，继续执行后面的表达式；
2. 然后<h1>...</h1>是一个React元素对象，在布尔上下文里属于真值；
3. 最后返回arr.map(...)的结果（一个徽章元素数组）。

也就是说，整个表达式最终只返回了arr.map的结果，<h1>元素只是作为&&运算的中间步骤，并没有被当作JSX内容渲染出来。

正确的写法 #

要同时渲染<h1>和徽章列表，你需要把它们包裹在一个容器里（比如<> Fragment、<div>或者数组），确保JSX表达式能返回多个元素：

方案1：使用React Fragment（推荐）

Fragment不会额外生成DOM节点，是最轻量化的选择：

render() {
  const arr = this.state.items;
  return(
    <Card>
      <Card.Body>
        <div>
          {arr.length > 0 && (
            <>
              <h1>Additional Text</h1>
              {arr.map((item) => (
                <Badge key={item.toString()} pill variant='primary'>
                  {item}
                </Badge>
              ))}
            </>
          )}
        </div>
      </Card.Body>
    </Card>
  );
}

方案2：使用数组包裹

如果你的React版本不支持短语法Fragment，可以用数组，注意给每个元素加唯一key：

render() {
  const arr = this.state.items;
  return(
    <Card>
      <Card.Body>
        <div>
          {arr.length > 0 && [
            <h1 key="additional-text">Additional Text</h1>,
            ...arr.map((item) => (
              <Badge key={item.toString()} pill variant='primary'>
                {item}
              </Badge>
            ))
          ]}
        </div>
      </Card.Body>
    </Card>
  );
}

方案3：用额外的<div>包裹

如果不介意多一层DOM节点，也可以直接用<div>把两个元素包起来：

render() {
  const arr = this.state.items;
  return(
    <Card>
      <Card.Body>
        <div>
          {arr.length > 0 && (
            <div>
              <h1>Additional Text</h1>
              {arr.map((item) => (
                <Badge key={item.toString()} pill variant='primary'>
                  {item}
                </Badge>
              ))}
            </div>
          )}
        </div>
      </Card.Body>
    </Card>
  );
}

关键总结 #

• JSX中，单个表达式只能返回一个根元素（或数组、Fragment）；
• &&运算符不会帮你渲染所有中间元素，它只会返回最后一个真值结果；
• 要渲染多个元素，必须用容器把它们聚合起来。

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