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

Question

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

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

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

谢谢大家

干杯

Answer 1

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

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

return render()

Answer 2

一个选择是制作一个 IIFE：

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

或者，如果您想避免每次都重新创建函数：

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

和

{ render(isDataLoading, products) }

Answer 3

这种情况似乎是一种可能在应用程序中多次发生的模式，因此可能值得实施另一个组件来处理这种逻辑，例如

<Loader isLoading={isDataLoading} hasData={!!products} >
   <Products product={products} />
</Loader>

加载器组件只有在有数据且未加载时才会渲染子组件，否则会显示占位符消息。

有个例子https://codepen.io/wilski-micha/pen/bGGbewm

Answer 4

我正在使用这个自定义助手：

const switchTrue = (object) => {
  const { default: defaultValue, ...rest } = object;
  const obj = { default: defaultValue, ...rest };
  const result = Object.keys(obj).reduce((acc, cur) => {
    return {
      ...acc,
      [cur === 'default' ? 'true' : cur]: obj[cur],
    };
  }, {});
  return result['true'];
};

const isDataLoading = false;
const products = false;
const component = switchTrue({
  [`${Boolean(isDataLoading)}`]: '<MyLoadingComponent />',
  [`${!products}`]: '<ThereIsNoDataComponent />',
  default: '<div>Some text</div>',
});

console.log(component) // <ThereIsNoDataComponent />

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

How to avoid nested ternary operators

javascript

html

reactjs

ternary-operator