React.js - 在Render中区分加载/空状态的简洁方法

Question

我有我的组件：

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™处理是否实际上没有数据与显示加载状态？

Answer 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）来表示没有返回任何结果。