reactjs - 如何在 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，如果我错了请纠正我)InnerContent 的构造函数和渲染器将不会被调用，除非 SomeWrapper 实际上决定使用它的 children 属性。

但是如果我不想为 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 作为 prop 传递:

   <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>