Javascript 使用React，如何编写更友好、更清晰的条件渲染

在我的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>
    );
  }

render（）{
常数{
孤岛，
leverJobData，
伊萨皮耶罗
}=本州；
返回(
开放角色：
{isLoading&&Loading…}
{！isLoading&&IsapieError&&出现问题。请稍后再试！}
{！isLoading&！Isapierro&&leverJobData.length==0&&(
目前没有空缺。
)}
{！isLoading&！Isapierro&&leverJobData.length>0&&(
{this.renderJobOpenings（leverJobData）}
)}
);
}

---

是否有一种更清晰的方式来写上面的内容，或者这是正确的方式来进行条件渲染吗？

< p>你也可以考虑包装类似的条件：

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

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

constmeow=（）=>{
常数{
孤岛，
leverJobData，
伊萨皮耶罗
}=本州；
返回(
开放角色：
{
！正在加载？
！伊萨皮耶罗？
leverJobData.length>0？
{this.renderJobOpenings（leverJobData）}：
目前没有空缺。
:
出现问题。请稍后再试！
：正在加载。。。
}
);
}

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

render（）{
常数{
孤岛，
leverJobData，
伊萨皮耶罗
}=本州；
const hasError=！isLoading&&IsapierError；
const noJobsAvailable=！isLoading&&！isApiError&&leverJobData.length==0；
const hasJobsAvailable=！isLoading&！Isapierro&&leverJobData.length>0；
返回(
开放角色：
{isLoading&&Loading…}
{hasrerror&&出现问题。请稍后再试！}
{noJobsAvailable&&目前没有空缺。}
{hasJobsAvailable&&this.renderJobOpenings（leverJobData）}
);
}

编写此结构最可读的方法是使用状态机。这可以通过

开关
语句实现：

const是_加载=1；
常数API_错误=2；
常数杠杆工作数据=3；
_renderStatus=（状态）=>{
开关（当前状态）{
箱子装载：
返回装载。。。；
案例API_错误：
返回出错的内容。请稍后再试！；
案例杠杆作业数据：
//在RenderJobs中，您可以处理空状态
const{leverJobData}=this.state；
返回此.renderJobOpenings（leverJobData）；
违约：
//或者确保呈现正确的无效状态信息
返回null；
}
}
render（）{
const{currentStatus}=this.state；
返回(
{这._renderStatus（当前状态）}
);
}

避免嵌套的三元操作。读起来真的很难

最好的处理方法是使用挂钩。通过这种方式，您可以通过一个副作用调用（setState）在多个触点中进行适当的状态更改。
我会这样做：

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

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


类MyComponent扩展了React.Component{
渲染=（）=>{
const{isLoading，isApiError，leverJobData}=this.state；
常量内容=（）=>{
如果（卸载）返回加载。。。；
否则，如果（isApiError）返回出错的内容，请稍后再试！；
否则，如果（leverJobData.length==0）返回，则此时没有空缺。；
else if（leverJobData.length>0）返回{this.renderJobOpenings（leverJobData）}；
};
回来
}
}
始终可以将渲染逻辑提取到函数中。但是在
jsx内部，我看不到比这更漂亮的代码了。我认为你的代码比答案可读得多，因为任何答案都会尝试用条件语句重新编写，这对大多数开发人员来说都更让人困惑（eslint在其中扮演了一个角色）。我想说：永远不要嵌套三元表达式。您可以通过从条件中删除
isLoading
，并在渲染中创建两个清晰的分支来进一步简化此操作。不要在渲染函数中创建组件，这将扰乱更新流（组件总是重新创建）。这一点很好。但格式仍然有效。只需将组件移出，并作为道具进入状态。