用于条件渲染的容器或组件

Question

在渲染错误，加载或空状态时，最佳做法是什么？

让容器控制渲染，或者让它实际上引用的组件控制它是否更好？

e.g

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

我认为我们应该尽可能多地制作组件。它使代码清晰，组件更具功能性。

在您的情况下，逻辑应该在基本组件中。我认为，你的组件应该只为自己的观点负责。并且它不应该意识到它应该显示的逻辑。

Answer 2

根据文档，两者都很好并且“正式正确”。 conditional rendering

但是，在您的示例中，我个人认为您的第二个示例更具可读性。首先你要处理特殊情况（错误和加载）然后处理“快乐路径”。这很容易阅读！