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

Posted 2023-02-23

【中文标题】ReactJS 使用 props 条件渲染组件的最佳方式

【英文标题】：ReactJS Best way to conditional rendering component with 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>
  );

【参考方案1】：

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

render() 

  let  isFetching  = this.props

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

【讨论】：

我认为 OP 解决方案完全没问题。我建议不要内联事物，因为它可能会变得混乱且难以可视化。

在这种情况下，我发现 inline 一点也不乱