将 JSX 语句存储在返回方法之外的变量中的最佳实践答案

【问题标题】：Best Practices to store JSX statement in a variable outside return method将 JSX 语句存储在返回方法之外的变量中的最佳实践
【发布时间】：2021-01-11 16:57:09
【问题描述】：

我正在尝试针对不同的条件渲染不同的 jsx，将 jsx 存储在 A 变量中的最佳做法是什么。


  let jobb = jobs.map((job) => <JobListing key={job.id} job={job} />

  let spin = <Spin style={{ display: "block", margin: "0 auto" }} size="large" />

  let errors = (openNotificationWithIcon('error')),
  Spin style={{ display: "block", margin: "0 auto" }} size="large" />

  function rendering () {
    if(loading == false && error == false)
      return jobb
    if(loading == true && error == false)
      return spin
    if(loading == true && error == true)
    return errors
  }

  return (
    <Layout.Content style={{ padding: "0 50px" }}>
      <Row>
        {rendering()}
      </Row>
    </Layout.Content>
  );
}

【问题讨论】：

这能回答你的问题吗？ Correct way (if possible) to store JSX code into a Javascript variable

标签： javascript reactjs jsx

【解决方案1】：

如果不是太大，我更喜欢直接在函数内部返回：

  function rendering () {
    if(loading == false && error == false)
      return jobs.map((job) => <JobListing key={job.id} job={job} />
    if(loading == true && error == false)
      return <Spin style={{ display: "block", margin: "0 auto" }} size="large" />
    ...rest
  }

  return (
    <Layout.Content style={{ padding: "0 50px" }}>
      <Row>
        {rendering()}
      </Row>
    </Layout.Content>
  );
}

它更干净，但对性能没有影响。

如果返回组件是多行的，您可以创建组件/文件并返回它们：

  import Jobs from './Jobs'
  import CustomSpin from './CustomSpin'

  function rendering () {
    if(loading == false && error == false)
      return <Jobs />
    if(loading == true && error == false)
      return <CustomSpin />
    ...rest
  }

  return (
    <Layout.Content style={{ padding: "0 50px" }}>
      <Row>
        {rendering()}
      </Row>
    </Layout.Content>
  );
}

【讨论】：