javascript - 使用 React，如何编写更友好和更清晰的条件渲染给定以下内容

Question

在我的 React 16 应用程序中，我有以下渲染函数：

  render() {
    const {
      isLoading,
      leverJobData,
      isApiError
    } = this.state;

    return (
      <Openings.Container>
        <Openings.StyledH4>Open roles:</Openings.StyledH4>

        {isLoading && <h4>Loading...</h4>}

        {!isLoading && isApiError && <h4>Something went wrong. Please try again later!</h4>}

        {!isLoading && !isApiError && leverJobData.length === 0 && (
          <h4>There are no openings at this time.</h4>
        )}

        {!isLoading && !isApiError && leverJobData.length > 0 && (
          <>{this.renderJobOpenings(leverJobData)}</>
        )}
      </Openings.Container>
    );
  }

是否有更简洁的方法来编写上述内容，或者这是在 React 中进行条件渲染的正确方法？

标签： javascriptreactjs

Answer 1

当我有这样的块时，我喜欢打破条件并准确描述它们在做什么。例如：

render() {
  const {
    isLoading,
    leverJobData,
    isApiError
  } = this.state;

  const hasError = !isLoading && isApiError;
  const noJobsAvailable = !isLoading && !isApiError && leverJobData.length === 0;
  const hasJobsAvailable = !isLoading && !isApiError && leverJobData.length > 0;

  return (
    <Openings.Container>
      <Openings.StyledH4>Open roles:</Openings.StyledH4>
      {isLoading && <h4>Loading...</h4>}
      {hasError && <h4>Something went wrong. Please try again later!</h4>}
      {noJobsAvailable && <h4>There are no openings at this time.</h4>}
      {hasJobsAvailable && this.renderJobOpenings(leverJobData)}
    </Openings.Container>
  );
}