Question

有时我需要创建一个包装元素，根据自己的逻辑显示其子元素（或不显示），可选择将它们包装在自己的元素选择中：

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

这是有效的，因为孩子们（＆＃34; Hello＆＃34;）是静态的。但是，如果要动态计算子项并且 只能在条件成立时才能明确定义怎么办？

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

这里，如果条件为false并且包装元素没有使用它的子元素，它们仍然会被创建并传递到树中，浪费资源并可能在过程中抛出错误。

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

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

这是因为（AFAIK，如果我错了，请纠正我）除非SomeWrapper实际决定使用其children道具，否则不会调用InnerContent的构造函数和render。

但是如果我不想为3行代码创建一个组件呢？

我在野外看到过两种选择，其中没有一种特别吸引人：

将thunk作为唯一的孩子传递：

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

传递一个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。）

还有其他我没见过的解决方案吗？我应该总是使用InnerContent元素吗？

Answer 1

您可以简单地执行以下操作

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

Answer 2

似乎渲染道具是一个东西，实际上有一个React页面解释了它们的用法和最佳实践：

Warnings

如何在React / Preact（aka。<if>组件）中传递条件子项

2 个答案: