javascript - 如何避免嵌套的三元运算符

Question

这是我经常重复的代码，我想避免这种情况:

{ isDataLoading ? (
            <MyLoadingComponent />
            ) : !products ? (
            <ThereIsNoDataComponent />
        ) : ( <div>Some text</div> )
    }

我该如何编写才能避免嵌套的三元运算符？

谢谢大家

干杯

Answer 1

您可以将逻辑包装在一个函数中并从您的 jsx block 中调用它

const render = () =>{
    if(isDataLoading) return <MyLoadingComponent />
    if(!products) return  <ThereIsNoDataComponent />
    return <div>Some text</div>
}

return render()