有沒有辦法判斷ReactElement是否呈現「null」？

在我的JSX，我有一個條件呈現邏輯的情況下 - 當A元素呈現的東西（這是render()函數返回比null其他的東西），然後還渲染元素B，只是元素A.有沒有辦法判斷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

陣營可能不「知道」如果elemA已經在這一點上呈現的東西，因爲渲染方法只是描述了一個結構。 – David

好的，所以在這種情況下，我看到兩個選項來解決這個問題： ** a）**在ElementA類中創建一個自定義方法，它會告訴我它是否會渲染「null」或其他東西 ** b）**在ElementA中移動條件渲染，並傳遞任何東西以渲染道具。 |我不確定前面的選項是否實際上是可能的，儘管... – mdziekon

如果ElementA是一個純粹的組件（通過道具描述的onky），那麼從這個.VarVar應該也可以告訴元素A是否會被渲染。 – 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-20ms的性能。（供應商是有假設你使用終極版和您的組件依賴於你的終極版狀態）：

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」？

回答

相關問題