ReactJS带有props的条件渲染组件的最佳方法

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的解决方案没问题。 另一种方式可以是内联：

render() {

  let { isFetching } = this.props

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