Реакция рендеринга невидимых компонентов при использовании enum для условного рендеринга - PullRequest
Новая
       8

Реакция рендеринга невидимых компонентов при использовании enum для условного рендеринга

0 голосов
/ 21 мая 2018

У меня есть компонент React, который должен условно визуализировать один из двух других компонентов, например: 

render() {
  const displayMode = this.props.condition ? 'a' : 'b';

  return (
     <div>
        {{
           a: <AComponent />,
           b: <BComponent userData={this.props.userData} />
        }[displayMode]}
     </div>
  );
}
...

BComponent требует данные, которых нет у AComponent, и поэтому данные недоступны, когда AComponentрендеринг.Неожиданное поведение состоит в том, что даже когда должен выполняться только AComponent, я получаю ошибки об отсутствующих данных, необходимых только для BComponent.

Короче говоря, оба компонента всегда выполняют рендеринг, когда я использую перечисление объекта.

Если я переключу его на следующее: 

render() {
  const displayMode = this.props.condition ? 'a' : 'b';

  return (
     <div>
        {displayMode === 'a' && (
           <AComponent />
        )}

        {displayMode === 'b' && (
           <BComponent />
        )}
     </div>
  );
}
...

Тогда у меня нет этой проблемы, выполняется только ожидаемый компонент, и я не получил никаких ошибок в отношении данных, требуемых длядругой компонент.

Итак, это работает, но я предпочитаю более чистый код, использующий объект enum.Мой вопрос, почему странное поведение, и это ожидаемое?

Спасибо!

1 Ответ

0 голосов
/ 21 мая 2018

Разница между двумя решениями заключается в порядке исполнения.В первом случае создается новый объект с 2 ключами a и b вместе с соответствующими компонентами AComponent и BComponent, а затем выводится значение ключа, совпадающего с displayMode.Во втором случае displayMode проверяется первым, и на основании его значения второе условие будет или не будет выполнено.Это похоже на выполнение: !!undefined && undefined.raiseNoError - второе условие игнорируется, поскольку оно не проходит первое условие.

...