React中如何单次校验渲染多元素？能否无else用三元渲染多元素？

当然可以实现！你遇到的问题是React条件渲染里的常见场景：当用&&做判断时，后面只能跟单个JSX元素，直接写多个<li>会触发语法错误——因为JSX要求兄弟元素必须被包裹起来。下面给你几种简单可行的解决方法：

方法1：使用React.Fragment（推荐） #

这是React官方推荐的方案，不会在DOM中生成额外的包裹节点，语法也很简洁。你可以用完整的<React.Fragment>标签，或者更方便的短语法<></>：

<ul className="navbar-nav my-2 my-lg-0">
  { settings !== null && (
    <>
      <li className="nav-item">
        <a className="nav-link" href={settings.facebook.url}>Facebook</a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href={settings.twitter.url}>Articles</a>
      </li>
    </>
  )}
</ul>

注意：短语法<></>不支持添加key属性，如果是在循环渲染中需要唯一标识的场景，记得用完整的<React.Fragment key="your-key">。

方法2：将元素放入数组 #

你可以把多个JSX元素放进一个数组里，每个元素必须添加唯一的key属性（React要求数组子元素必须有key）：

<ul className="navbar-nav my-2 my-lg-0">
  { settings !== null && [
    <li key="facebook-link" className="nav-item">
      <a className="nav-link" href={settings.facebook.url}>Facebook</a>
    </li>,
    <li key="twitter-link" className="nav-item">
      <a className="nav-link" href={settings.twitter.url}>Articles</a>
    </li>
  ]}
</ul>

记得数组元素之间要加逗号分隔，不然会有语法问题。

方法3：抽离为独立组件 #

如果后续可能要扩展更多社交链接，把这部分逻辑抽成单独组件会让代码更整洁、易维护：

// 定义独立组件
const SocialNavLinks = ({ settings }) => (
  <>
    <li className="nav-item">
      <a className="nav-link" href={settings.facebook.url}>Facebook</a>
    </li>
    <li className="nav-item">
      <a className="nav-link" href={settings.twitter.url}>Articles</a>
    </li>
  </>
);

// 在父组件中使用
<ul className="navbar-nav my-2 my-lg-0">
  { settings !== null && <SocialNavLinks settings={settings} /> }
</ul>

这种方式不仅让主组件代码更简洁，也方便单独测试和复用这部分UI。

另外补充一下：以上方法都需要你使用React 16及以上版本，因为从React 16开始才支持组件返回多个元素或数组。

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