Is there a way to tell if ReactElement renders "null"?
No, there's no way to determine what a child will render using React. The standard way to do this is to expose some utility function that says whether A will render.
Something like:
if (AUtils.isStoryValid(story)) {
return <A story={story} />;
} else {
return <B story={story} />;
}
You can use the following higher order component (HOC) to intercept the render method of ElementA and accomplish what you want:
function withNullCheck(WrappedComponent) {
return class NullChecker extends WrappedComponent {
render() {
const result = super.render();
return(
<div>
{ this.props.alwaysPrefix }
{ result && this.props.ifNotNullPrefix }
{ result ? result : this.props.ifNull }
{ result && this.props.ifNotNullAppend }
{ this.props.alwaysAppend }
</div>
);
}
}
}
You would use it like this:
const NullCheckedElementA = withNullCheck(ElementA);
...
function render() {
return (
<NullCheckedElementA
alwaysPrefix={someElements}
ifNotNullPrefix={elemB}
someProp={this.someVar}
/>
);
}