React.js - 在渲染中区分加载/空状态的干净方法答案

【问题标题】：React.js - clean way to differentiate loading/empty states in RenderReact.js - 在渲染中区分加载/空状态的干净方法
【发布时间】：2015-06-22 22:45:07
【问题描述】：

我有我的组件：

getInitialState() {
    return {
        items: []
    };
},

componentDidMount() {
    // make remote call to fetch `items`
    this.setState({
        items: itemsFromServer
    })
},

render(){
    if(!this.state.items.length){
        // show empty state
    }
    // output items
}

极度人为/沙盒，但这是一般的想法。首次加载此组件时，您会看到“空状态”HTML 的闪烁，因为服务器尚未返回任何数据。

有没有人有一种方法/一种 React Way™ 来处理是否实际上没有数据与显示加载状态？

【问题讨论】：

处理这个问题的最好方法是让你的应用程序同构，这样 html 就会完全加载到页面上并智能地附加自身。不过，这绝对不是最简单的方法，那就是使用加载微调器遮盖您的页面，并在 DOM 准备好后使用一些 JS 将其删除。

标签： javascript reactjs

【解决方案1】：

我刚刚渲染了一个空的 span 元素，但您也可以轻松地渲染某种 CSS 微调器来显示它正在加载。

if(!this.state.items.length){
    return(<div class="spinner-loader">Loading…</div>);
}

http://www.css-spinners.com/

您可能还想考虑如果您的回复没有结果会发生什么。我会使用 (this.state.items === null) 表示您正在等待结果，并使用空数组/集合 (!this.state.items.length) 表示未返回任何结果。

【讨论】：

您的意思是使用this.state.items.length 吗？ this.state 是一个对象，在这种情况下没有length 属性。
谢谢，我错过了。更新了答案。