Javascript 在React中渲染复杂布局的最佳方法是什么

我有两个布局是根据布尔条件更改的。该条件的名称为

showMap

。这就是我正在做的

 <Grid container xs={12} md={If(props.showMap, 4, 12)} 
    lg={If(props.showMap, 4, 12)} 
    xl={If(props.showMap, 3, 12)} 
    spacing={If(props.showMap, 0, 2)} item={true}>
      .....
 </Grid>

---

您可以定义两个配置常量，一个带有showMap为true时的值，另一个用于showMap为false时的值

在渲染内部，您可以执行`let gridConfig={this.props.showMap？config1:config2}

返回网格时，只需执行

lg={gridConfig.lg}

---

这将减少IF调用的

数量，但不幸的是，每当状态更新重新呈现时。因此，我不确定是否是
如果
导致了性能问题，但我认为主要问题在于重新渲染的数量，不幸的是。@Mohamadhasham也许生命周期方法
componentShouldUpdate（）
可能有用，那么当状态使用条件更新时，您可以停止重新渲染的反应。
function If(value, ifTrue, ifFalse) {
  return value ? ifTrue : ifFalse
}