如何在渲染不同组件时简单地嵌套三元逻辑

Posted 2023-02-23

【中文标题】如何在渲染不同组件时简单地嵌套三元逻辑

【英文标题】：How to simply nested ternary logic in react while rendering different component

【发布时间】：2021-12-13 13:00:24

【问题描述】：

我在反应组件中有以下逻辑，我正在根据布尔值呈现不同的组件。这种和平的代码很难理解。反正有没有，我可以简单的说一下逻辑：

      isEnabled ? (
      <>
        !loading ? (
          <>
            items.length === 0 ? (
              <>
                <ComponentOne/>
                <Container>
                  <img src=Image  />
                </Container>
              </>
            ) : (
              <ComponentTwo/>
            )
          </>
        ) : (
          <div>
            <LoadingComponent/>
          </div>
        )
      </>
    ) : (
      <ComponentThree/>
    )

【问题讨论】：

您是否遇到任何问题或想要改进逻辑？

我想改进这个逻辑，因为它似乎很难阅读和理解。

【参考方案1】：

例如，我可能会将其拆分为单独的组件并将参数向下传递到组件树

isEnabled ? <IsLoadingComponent loading=loading items=items> : <ComponentThree/>

【参考方案2】：

您可能会发现将组件拆分为“正在加载”版本和“已加载”版本很有用，这样您就不必在同一个组件中处理这两种状态。然后组件基本上只是根据标志呈现“正在加载”或“已加载”版本。

但即使没有它，您至少可以通过使用if/else if 等并分配给临时变量来使其更易于调试：

let comp;
if (isEnabled) 
    if (loading) 
        comp = <div>
            <LoadingComponent/>
        </div>;
     else if (items.length === 0) 
        comp = <>
            <ComponentOne/>
            <Container>
                <img src=Image  />
            </Container>
        </>;
     else 
        comp = <ComponentTwo />;
    
 else 
    comp = <ComponentThree />;

那么就

comp

嵌套条件在哪里。

【参考方案3】：

我认为您将一件简单的事情变得非常复杂。我们可以做的是使用“&&”。

   isEnabled && loading && <LoaderComponent /> 
   isEnabled && !items.length  &&
     <>
     <ComponentOne/>
     <Container>
        <img src=Image  />
     </Container>
  </>

isEnabled && items.length && <ComponentTwo/>
!isEnabled && <ComponentThree />

【讨论】：

这仍然不像原来的那样。要执行原始操作，需要在各个地方重复 loading 的测试。 （例如：在加载期间，这会渲染 ComponentOne [作为片段的一部分] 或 ComponentTwo，具体取决于 items.length，但如果 loading 是 true，则两者都不应该渲染。）另一种选择，我喜欢这个尝试的方向，但对我来说，重要的是它处理与原始相同的情况。

【参考方案4】：

虽然我想支持其他人提出的论点（拆分为多个组件），但您已经可以通过删除不必要的片段 (<></>) 和/或括号以及使用 "better" 来获得更多的可读性^（意见）缩进。

return (
  isEnabled
    ? loading
      ? <div><LoadingComponent/></div>
      : items.length === 0
        ? <> /* this is the only place a fragment is actually needed */
          <ComponentOne/>
          <Container>
            <img src=Image />
          </Container>
        </>
        : <ComponentTwo/>
    : <ComponentThree/>
);

---

另外，提前返回确实有助于提高可读性。例如：

const SomeComponent = () => 
  // ...snip...

  if (!isEnabled) 
    return <ComponentThree/>;
  

  if (loading) 
    return <div><LoadingComponent/></div>;
  

  if (items.length > 0) 
    return <ComponentThree/>;
  

  return (
    <>
      <ComponentOne/>
      <Container>
        <img src=Image />
      </Container>
    </>
  );