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

【问题标题】：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} alt="Image" />
                </Container>
              </>
            ) : (
              <ComponentTwo/>
            )}
          </>
        ) : (
          <div>
            <LoadingComponent/>
          </div>
        )}
      </>
    ) : (
      <ComponentThree/>
    )}

【问题讨论】：

您是否遇到任何问题或想要改进逻辑？
我想改进这个逻辑，因为它似乎很难阅读和理解。

标签： javascript reactjs conditional-operator

【解决方案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} alt="Image" />
            </Container>
        </>;
    } else {
        comp = <ComponentTwo />;
    }
} else {
    comp = <ComponentThree />;
}

那么就

{comp}

嵌套条件在哪里。

【讨论】：

【解决方案3】：

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

  { isEnabled && loading && <LoaderComponent /> }
   {isEnabled && !items.length  &&
     <>
     <ComponentOne/>
     <Container>
        <img src={Image} alt="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} alt="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} alt="Image"/>
      </Container>
    </>
  );
}

【讨论】：