C'è un modo per dire se ReactElement esegue il rendering "null"?

Question

Nel mio JSX, ho un caso di una logica di rendering condizionale - quando l'elemento A rende qualcosa (è render() funzione restituisce qualcosa di diverso da null), poi anche il rendering elemento B, appena sopra l'elemento A.

Esempio di codice (semplificato) sarebbe simile a questa:

function render() { 
    let elemA = (<ElementA someProp={this.someVar} />); 

    if (elemA.isNull()) { 
     return (
      <div> 
       { ...someElements } 
      </div> 
     ); 
    } 

    return (
     <div> 
      { ...someElements } 
      <ElementB /> 
      { elemA } 
     </div> 
    ); 
} 

Quindi la mia domanda è - c'è un modo per avere l'assegno elemA.isNull()?

Answer 1

No, non c'è modo di determinare cosa renderà un bambino utilizzando React. Il modo standard per farlo è esporre qualche funzione di utilità che dice se A renderà.

Qualcosa di simile:

if (AUtils.isStoryValid(story)) { 
    return <A story={story} />; 
} else { 
    return <B story={story} />; 
} 

Answer 2

È possibile utilizzare i seguenti componenti di ordine superiore (HOC) per intercettare il metodo di Elementa render e realizzare ciò che si vuole:

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

si dovrebbe utilizzare come this:

const NullCheckedElementA = withNullCheck(ElementA); 

... 

function render() { 

    return ( 
     <NullCheckedElementA 
     alwaysPrefix={someElements} 
     ifNotNullPrefix={elemB} 
     someProp={this.someVar} 
     /> 
    ); 

} 

Answer 3

Quindi mi sono imbattuto in una situazione in cui ero bloccato dover fare questo, qui io È un modo che funziona (anche se la sciatteria potrebbe farti piangere).

Dovrebbe essere utilizzato solo come ultima risorsa perché è davvero un trucco totale e si verificherà un calo di prestazioni di ~ 0-20 ms a seconda della complessità del componente. (Provider c'è supponendo che si sta utilizzando redux e il componente dipende dal vostro stato redux):

import { renderToStaticMarkup } from 'react-dom/server'; 
import { Provider } from 'react-redux'; 
import store from 'pathToYourReduxStoreInstance'; 


export default function isRenderingNull(componentInstance) { 
    return !renderToStaticMarkup(
    <Provider store={store}> 
     {componentInstance} 
    </Provider> 
) 
}