Tell me, is there an option to use this.props.children with a lazy effect?

I want to write a component wrapper PropsValidator , which as children accepts other components that use props that may not yet exist. I wanted to render the logic of validation of these props just in PropsValidator . But faced with the fact that this.props.children are calculated impatiently (eager), which is why everything crashes (because they are knocking on the blades that do not exist yet.)

 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; } } }

I planned to use it this way, but because this.props.action.description does not yet exist, but this.props.children are not lazy, then a crash occurs:

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

    1 answer 1

    As I understand it, in the usual version lazy calculations are not implemented, but you can assign this functionality to Babel. Like, say, the jsx-control-statements plugin does this. Your example can be rewritten in this way.

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

    Obviously, such constructions make sense, if only such markup is already embedded in some other element. After all, otherwise you can use a simple if ... else .