Контейнеры или компоненты для условного рендеринга

Question

Что лучше всего подходит для визуализации ошибок, загрузки или пустого состояния?

Лучше ли управлять контейнером рендерингом или иметь компонент, который по существу относится к управлению этим?

например

render() { 
    const { 
     loading, 
     error, 
     items 
    } = this.state; 

    return (
     <div> 
      { 
      loading && 
      <Loading /> 
      } 
      { 
      error && 
      <Error /> 
      } 
      etc... 

или

const ItemList = ({ items, loading, error }) => { 
    if (loading) { 
     return <Loading /> 
    } 
    etc... 

Все мнения приветствуются/оценены. Спасибо!

Answer 1

Оба являются точными и являются «официально правильными» в соответствии с документами. conditional rendering.

Однако в вашем примере я лично считаю, что ваш второй пример более читабельен. Сначала вы заботитесь о специальных случаях (ошибка и загрузка), затем «счастливый путь». Это быстро и легко читать!

Answer 2

Я думаю, что мы должны сделать как можно больше компонентов. Это делает код понятным, а компоненты более функциональными.

В вашем случае логика должна быть в базовом компоненте. Я думаю, ваш компонент должен отвечать только за его собственное мнение. И он не должен знать о логике, с которой он должен отображаться.