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）來表示沒有返回任何結果。