如何在 React / Preact 中传递条件子项(又名。<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>

在这里，如果条件是错误的，并且包装元素不利用其孩子，则它们仍然会被创建并传递到树上，浪费资源并可能在此过程中丢弃错误。

一个解决方案(可能是最好的？(是将内容包装在其自己的组件中：

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

这有效，因为(Afaik，如果我错了，请纠正我(内心的构造函数和渲染将不会被调用，除非某些Wrwrapper实际上决定使用其childrenProp。

但是，如果我不想为3行代码创建组件怎么办？

我在野外看到了两种选择，它们都没有特别吸引人：

1. 将thunk作为唯一的孩子：

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

2. 将thunk作为道具传递：

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

我不喜欢它们，因为Lambda在代码中添加了视觉噪音，更不用说浪费资源了，在每个render()执行(AFAIK(中都重新创建了

。

我还没有看到其他解决方案吗？我应该始终使用内心元素吗？

Answer 1

您可以简单地执行以下

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

Answer 2

看来渲染道具是一件事情，实际上有一个反应页面解释其用法和最佳实践：

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