如何在React / Preact（aka。 <If> 零件）

Question

有時我需要創建一個包裝器元素，以根據其自身的邏輯顯示（或不顯示）其子級，可以選擇將其包裝為自己選擇的元素：

<SomeWrapper some={condition}>
  Hello
</SomeWrapper>

這是有效的，因為子級（“ Hello”）是靜態的。 但是，如果要動態計算子項並且僅在條件成立時才能明確定義子項，該怎么辦？

<SomeWrapper some={condition}>
  <ul>
    {this.may.not.exist.unless.condition.map(item => 
      <li key={item.id}>{item.text}</li>
    )}
  </ul>
</SomeWrapper>

在這里，如果條件為false且wrapper元素未使用其子元素，則仍將創建它們並將其傳遞給樹，從而浪費資源並可能在過程中引發錯誤。

一種解決方案（可能是最好的？）是將內容包裝在自己的組件中：

<SomeWrapper some={condition}>
  <InnerContent/>
</SomeWrapper>

之所以可行，是因為（AFAIK，如果我錯了，請糾正我）除非SomeWrapper實際決定使用其children道具，否則不會調用InnerContent的構造函數和渲染。

但是，如果我不想為3行代碼創建組件怎么辦？

我在野外看到了兩個選擇，沒有一個特別吸引人：

1. 將一個笨蛋作為獨生子女：

    <SomeWrapper some={condition}>{() => <ul> {this.may.not.exist.unless.condition.map(item => <li key={item.id}>{item.text}</li> )} </ul> }</SomeWrapper> 

2. 以重擊為道具

    <SomeWrapper some={condition} render={() => <ul> {this.may.not.exist.unless.condition.map(item => <li key={item.id}>{item.text}</li> )} </ul> }/> 

我不喜歡它們，因為lambda在代碼中增加了視覺噪音，更不用說浪費資源了，因為它們在每次render()執行（AFAIK）時都會重新創建。

我還有其他解決方案嗎？ 我應該始終使用InnerContent元素嗎？

Answer 1

您可以簡單地執行以下操作

<Container> {yourCondition === true && <ConditionalChildElement/>} </Container>

Answer 2

渲染道具似乎是一回事，實際上有一個React頁面解釋了它們的用法和最佳實踐：

https://reactjs.org/docs/render-props.html