Lazy для this.props.children

305

10 февраля 2020, 01:10

Подскажите, есть ли вариант использовать this.props.children с lazy эффектом?

Хочу написать компонент-обертку PropsValidator, которая в качестве children принимает в себя другие компоненты, использующие props которые еще могут не существовать. Логику валидации этих props хотел вынести как раз в PropsValidator. Но столкнулся с тем, что this.props.children вычисляются нетерпеливо (eager), из-за чего все крашится (т.к. они стучатся к пропертям которые еще не существуют.)

class PropsValidator extends PureComponent {
  static propTypes = {
    isValid: PropTypes.bool
  }
  static defaultProps = {
    isValid: false
  }
  render() {
    if (this.props.isValid) {
      return <UIActivityIndicator color={colorAccent} />
    } else {
      return this.props.children;
    }
  }
}

Использовать планировал так, но т.к. this.props.action.description еще не существует, а this.props.children не ленивые, то происходит краш:

        <PropsValidator isValid={this.props.action && this.props.action.description}>
          <Text>
            {this.props.action.description}
          </Text>
        </LoadableView>

Answer 1

Как я понимаю, в обычном варианте ленивые вычисления не реализовать, но можно возложить эту функциональность на Babel. Как, скажем, это делает плагин jsx-control-statements. Ваш пример можно переписать таким способом.

<Choose>
  <When condition={this.props.action && this.props.action.description}>
    <Text>{this.props.action.description}</Text>
  </When>
  <Otherwise>
     <UIActivityIndicator color={colorAccent} />
  </Otherwise>
</Choose>

Очевидно, подобные конструкции имеют смысл, если только такая разметка уже вложена в какой-нибудь другой элемент. Ведь иначе можно воспользоваться простым if ... else.