javascript - 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) 表示没有返回任何结果。