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> 
); 
}