如何轉換 DOM 上尚不存在的元素

Question

現在我有這樣的代碼

  {data.inventoryOn === true ? (
      <div className="inventoryOptions flex__container-v">
        <Link to="listofmedicines" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">List Of Medicines</p>
          </div>
        </Link>
        <Link to="medicinegroups" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">Medicines Groups</p>
          </div>
        </Link>
      </div>
    ) : null}
    {data.spaceBelow ? <div className="space" /> : null}

正如您可能已經注意到的那樣，代碼的顯示取決於某些 state 值是否為真。

我的問題是如何讓它看起來更平滑。 我無法轉換它，因為我不知道背景或顏色或其他屬性。 並且內容不會隱藏，因為當 state 值不正確時，它完全不可用。

我怎樣才能做到這一點？

Answer 1

如果堅持使用條件渲染，可以根據react使用css animation和onAnimationEnd prop，這個snippet中有實現