如何延迟对作为道具子项传递给另一个组件的 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
   }
}