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

Question

我有两个基于布尔条件更改的布局。条件的名称是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>

并且有很多这样写的代码（嵌套在网格内）以避免代码重复。但它影响了性能，因为重新渲染和更改布局需要一些时间。

对于这种类型的条件复杂渲染在 React 中是否有更好的方法？

If的实现如下：

function If(value, ifTrue, ifFalse) {
  return value ? ifTrue : ifFalse
}

Answer 1

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

在渲染内部你可以做 `let gridConfig = { this.props.showMap ?配置1：配置2}

返回网格时只需执行lg={gridConfig.lg}

这将减少IF 调用的数量，但不幸的是，每当状态更新反应重新渲染时。所以我不确定IF 是否会导致性能问题