Каков наилучший подход для рендеринга сложных макетов в 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 вызывает проблемы с производительностью