如何延遲對作為道具子項傳遞給另一個組件的 JSX 的評估？

Question

反應16.13 。 我正在編寫一個Loader組件來處理不同的故障狀態，並將“成功”的內容作為一個孩子傳遞，如下所示：

<Loader
    isLoading={loading}
    isError={error}>

    <div>{this.props.loadedContentFromRedux}</div>
</Loader>

Loader 組件非常簡單：

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    this.props.children
}

}

據我了解，因為我將loadedContentFromRedux道具直接傳遞給孩子，所以在作為孩子傳遞給Loader之前對其進行評估，因此在調用Loader的渲染方法之前對其進行評估。

有沒有辦法可以延遲評估以防止這種情況發生，或者我需要防止這種情況發生？ 或者也許克隆孩子並以這種方式傳遞道具？

Answer 1

嘗試這個：

const loadedContent = () => <div>{this.props.loadedContentFromRedux}</div>

<Loader
 isLoading={loading}
 isError={error}
 loadedContent={loadedContent}       
/>

將 Loader 組件更改為：

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    this.props.loadedContent()
   }
}

通過這樣做，您 r 在傳遞時不會執行加載的內容，因此不會發生this.props.loadedContentFromRedux執行。 它將在 render 方法中的Loader組件中執行。

編輯后的答案

我能夠在此基礎上構建並稍微更改語法，這樣看起來更容易，並且小時候通過 function。 它需要在Loader渲染中進行類型檢查，如下所示：

<Loader
 isLoading={loading}
 isError={error}>

{() => <div>{this.props.loadedContentFromRedux}</div>}

</Loader>

然后防范 function 類型如下 - 這是因為 JSX 有時會被過早評估：

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    typeof this.props.children==='function' ? this.props.children() :
    this.props.children
   }
}