短路评估 - React

Question

Using a short circuit evaluation in a functional component (with hooks):

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

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

Is there a way to render multiple elements right after an inline if condition?

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

Code above doesn't work, react throws an error. options array is filled after a promise resolved from useEffect() . That's why i've added this check, to display elements only when a promise resolved.

UPDATED CODE for @wentjun:

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

This throws a syntax error.

Answer 1

I think the error is due to returning two react elements. Try wrapping then in fragment

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

Answer 2

You should wrap the elements in React Fragments . The reason being, React elements are rendered via a single root node element. Wrapping it in Fragments will allow you to group the elements without adding additional nodes.

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