如果条件为真，则添加多个JSX/HTML元素

if (condition) {
  return (
    <div>
      <h1>Element 1</h1>
      <p>Element 2</p>
      <span>Element 3</span>
    </div>
  );
} else {
  return null;
}

return (
  <div>
    {condition ? (
      <>
        <h1>Element 1</h1>
        <p>Element 2</p>
        <span>Element 3</span>
      </>
    ) : null}
  </div>
);

return (
  <div>
    {condition && (
      <>
        <h1>Element 1</h1>
        <p>Element 2</p>
        <span>Element 3</span>
      </>
    )}
  </div>
);

if (condition) {
  var element1 = document.createElement("h1");
  element1.textContent = "Element 1";
  document.body.appendChild(element1);

  var element2 = document.createElement("p");
  element2.textContent = "Element 2";
  document.body.appendChild(element2);

  var element3 = document.createElement("span");
  element3.textContent = "Element 3";
  document.body.appendChild(element3);
}

condition
  ? (() => {
      var element1 = document.createElement("h1");
      element1.textContent = "Element 1";
      document.body.appendChild(element1);

      var element2 = document.createElement("p");
      element2.textContent = "Element 2";
      document.body.appendChild(element2);

      var element3 = document.createElement("span");
      element3.textContent = "Element 3";
      document.body.appendChild(element3);
    })()
  : null;