如何在react中简单地嵌套三元逻辑，同时呈现不同的组件

Question

我在react组件中有以下逻辑，我根据布尔值呈现不同的组件。这种平和的代码非常难以理解。无论如何，我可以简单地逻辑:

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

Answer 1

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

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

Answer 2

您可能会发现将组件拆分为"正在加载"版本和"Loaded"版本，这样您就不必在同一个组件中处理两种状态。然后这个组件就会渲染Loading"或";Loaded"版本取决于标志。

但是即使没有这个，你至少可以通过使用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}

嵌套条件所在的位置。

Answer 3

我认为你把一件简单的事情弄得很复杂。我们所能做的就是利用"&&"

{ isEnabled && loading && <LoaderComponent /> }
{isEnabled && !items.length  &&
<>
<ComponentOne/>
<Container>
<img src={Image} alt="Image" />
</Container>
</>
}
{isEnabled && items.length && <ComponentTwo/>}
{!isEnabled && <ComponentThree />}

Answer 4

虽然我想支持其他人的论点(分成多个组件)，但是您已经可以通过删除不必要的片段(<></>)和/或括号以及使用"better">^(opinion)缩进来实现更强的可读性。

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