时间戳

首页 > 解决方案 > 在 React 中渲染复杂布局的最佳方法是什么

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>

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

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

的实现If如下：

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

标签： javascriptreactjsmaterial-ui

解决方案

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

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

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

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

推荐阅读