Как избежать вложенных тернарных операторов - PullRequest
Новая
       32

Как избежать вложенных тернарных операторов

3 голосов
/ 03 октября 2019

Вот мой код, который повторяется довольно часто, и я хотел бы избежать этого: 

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

Как я мог бы написать это, чтобы избежать вложенных троичных операторов?

Спасибо, ребята

Приветствия

Ответы [ 3 ]

4 голосов
/ 03 октября 2019

Вы можете заключить логику в функцию и вызвать ее из вашего jsx блока 

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

return render()
2 голосов
/ 03 октября 2019

Этот случай выглядит как шаблон, который может встречаться в приложении более одного раза, поэтому может потребоваться реализация другого компонента для обработки этой логики, например, 

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

Компонент загрузчика будет отображать дочерние компоненты, только еслиэто данные, и они не загружаются, в противном случае будет отображаться сообщение-заполнитель.

Есть пример https://codepen.io/wilski-micha/pen/bGGbewm

1 голос
/ 03 октября 2019

Один из вариантов - сделать 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) }
...