javascript - 如何使用短路评估在内联条件后渲染多个元素？

Question

在功能组件中使用短路评估(带钩子(Hook)):

const Filters = () => {
  const [options, setOptions] = useState([]);

  return (
    <div className="row">
      {options.length > 0 && (
        <div className="col-md-3">
          <CustomComponent />
        </div>
      )}
    </div>
  )
}

有没有办法在内联 if 条件之后立即渲染多个元素？

{options.length > 0 && (
  <div className="col-md-3">
    <CustomComponent />
  </div>
  <div className="col-md-3">
    <SecondComponent />
  </div>
)}

上面的代码不起作用，react 抛出错误。 options 数组在从 useEffect() 解析 Promise 后填充。这就是为什么我添加了此检查，以便仅在 promise 解决时才显示元素。

@wentjun 的更新代码:

return (
  {options.length > 0 && (
    <div className="row">
      <div className="col-md-3">
        <CustomComponent />
      </div>
    </div>
  )}
  )

这会引发语法错误。

Answer 1

我认为错误是由于返回两个 react 元素造成的。尝试将其包装在片段中

{options.length > 0 && (
  <>
    <div className="col-md-3">
      <CustomComponent />
    </div>
    <div className="col-md-3">
      <SecondComponent />
    </div>
  </>
)}