ReactJS 使用 props 条件渲染组件的最佳方式

【问题标题】：ReactJS Best way to conditional rendering component with propsReactJS 使用 props 条件渲染组件的最佳方式
【发布时间】：2018-03-18 08:12:15
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs components rendering

【解决方案1】：

您的解决方案很好。另一种方式可能是内联：

render() {

  let { isFetching } = this.props

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

【讨论】：

我认为 OP 解决方案完全没问题。我建议不要内联事物，因为它可能会变得混乱且难以可视化。
在这种情况下，我发现 inline 一点也不乱