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

Question

I am trying to render different jsx for different conditions, What is best practice to store jsx in A variable.

  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>
  );
}

Answer 1

i prefer to return it inside the function directly if it is not too large:

  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>
  );
}

It is cleaner, but makes no difference in the performance.

If the return Components are multiline, you could create components/files and return them instead:

  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>
  );
}