Есть ли способ узнать, отображает ли ReactElement "null"?

Question

В моей JSX, у меня есть случай условной визуализации логики - когда элемент А делает что-то (это render() функция возвращает нечто иное, чем null), то и делают элемент B, чуть выше элемента А.

пример кода (упрощенный) будет выглядеть следующим образом:

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

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

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

Так что мой вопрос - есть ли способ иметь elemA.isNull() чек?

Answer 1

Нет, не существует способа определить, что ребенок будет визуализировать с помощью React. Стандартный способ сделать это - выставить некоторую функцию полезности, которая говорит, будет ли A рендер.

Что-то вроде:

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

Answer 2

Вы можете использовать следующие компоненты высокого порядка (HOC) для перехвата визуализации метод Elementa и выполнить то, что вы хотите:

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

Вы бы использовать его как это:

const NullCheckedElementA = withNullCheck(ElementA); 

... 

function render() { 

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

} 

Answer 3

Так что я столкнулся с ситуацией, когда я застрял, чтобы сделать это, здесь я это способ, который работает (хотя хакерство может заставить вас плакать).

Следует использовать только в качестве последнего средства, потому что это действительно полный хак, и вы получите удар в 0-20 мс в зависимости от сложности компонента. (Provider есть при условии, что вы используете Redux и ваш компонент зависит от состояния вашего 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> 
) 
}