ReactJS条件渲染组件与道具的最佳方式

Question

现在我的Container看起来像这样。但我不认为这是最好的方式。

renderAddForm() { 
 
    if (!this.props.isFetching) { 
 
    return <div>loading</div>; 
 
    } 
 
    return <AddForm {...this.props} />; 
 
} 
 

 
render() { 
 
    return (
 
    <Layout> 
 
     <PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" /> 
 
     {this.renderAddForm()} 
 
    </Layout> 
 
); 
 
}

Answer 1

你解决它的罚款。 另一种方式可以是内联：

render() { 

    let { isFetching } = this.props 

    return (
    <Layout> 
     <PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" /> 
     {isFetching ? <div>loading</div> : <AddForm {...this.props} />} 
    </Layout> 
); 
}