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

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

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

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

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

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

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

источник

2015-10-14 mdziekon

React не может «знать», если Элема оказал ничего на данный момент, так как метод визуализации просто описывает структуру , – David

Итак, в этом случае я вижу два варианта решения этой проблемы: ** a) ** Создайте собственный метод внутри класса ElementA, который скажет мне, будет ли он отображать '' null'' или что-то еще ** b) ** Переместите условный рендеринг внутри элемента ElementA и передайте что-либо для отображения в качестве опоры. | Я не уверен, что первый вариант действительно возможен, хотя ... – mdziekon

Если ElementA является чистым компонентом (onky описать реквизитом), тогда также должно быть возможно сказать из этого.someVar, будет ли отображаться ElementA. – wintvelt

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

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

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

источник

2016-08-21 01:13:00

Вы можете использовать следующие компоненты высокого порядка (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} 
     /> 
    ); 

}

источник

2016-09-07 17:41:03 Pablo

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

Следует использовать только в качестве последнего средства, потому что это действительно полный хак, и вы получите удар в 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> 
) 
}

источник

2017-03-29 21:40:25 SirRodge

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

ответ

Смежные вопросы