ReactJS条件渲染组件与道具的最佳方式
问题描述:
现在我的Container看起来像这样。但我不认为这是最好的方式。ReactJS条件渲染组件与道具的最佳方式
renderAddForm() {
if (!this.props.isFetching) {
return <div>loading</div>;
}
return <AddForm {...this.props} />;
}
render() {
return (
<Layout>
<PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" />
{this.renderAddForm()}
</Layout>
);
}
答
你解决它的罚款。 另一种方式可以是内联:
render() {
let { isFetching } = this.props
return (
<Layout>
<PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" />
{isFetching ? <div>loading</div> : <AddForm {...this.props} />}
</Layout>
);
}
我认为OP解决方案是完全正确的。我会建议反对内联,因为它可能会变得混乱,难以形象化。 – nbkhope
在这种情况下,我不觉得内联是混乱的 – Pietro