Czy istnieje sposób sprawdzenia, czy ReactElement renderuje wartość "null"?

Question

W moim JSX mam przypadek warunkowego logiki renderowania - kiedy elementu A czyni coś (to render() funkcja zwraca coś innego niż null), a następnie także renderowanie elementu B, tuż nad elementem A.

przykład

Code (uproszczony) wyglądałby następująco:

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

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

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

Więc moje pytanie brzmi: - Czy istnieje jakiś sposób, aby mieć kontrolę elemA.isNull()?

Answer 1

Nie, nie ma sposobu, aby ustalić, co dziecko wyrenderuje za pomocą przycisku React. Standardowym sposobem wykonania tej czynności jest ujawnienie pewnej funkcji użyteczności, która określa, czy A będzie renderować.

Coś jak:

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

Answer 2

Można użyć następującego komponentu wyższego rzędu (HOC), aby przechwycić tynku metodą elementa i osiągnąć to, co chcesz:

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

byłoby go używać jak to:

const NullCheckedElementA = withNullCheck(ElementA); 

... 

function render() { 

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

} 

Answer 3

Więc natknąłem się na sytuację, w której utknąłem, że muszę to zrobić, tutaj ja Jest to sposób, który działa (choć hackiness może sprawić, że będziesz płakać).

Powinien być używany tylko w ostateczności, ponieważ w rzeczywistości jest to całkowita próba hakerska, a w zależności od złożoności komponentu osiągniesz wynik 0-20ms. (Provider ma zakładając używasz Redux i komponent zależy od stanu 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> 
) 
}