在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？config1:config2}

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

这将减少IF调用的数量，但不幸的是，无论何时状态更新都会重新渲染。因此，我不确定IF是否导致性能问题