javascript – React.js – 在渲染中区分加载/空状态的简洁方法

前端之家收集整理的这篇文章主要介绍了javascript – React.js – 在渲染中区分加载/空状态的简洁方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有我的组件:
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™处理是否实际上没有数据与显示加载状态?

解决方法

我刚刚渲染了一个空的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)来表示没有返回任何结果.

原文链接:https://www.f2er.com/js/158094.html

猜你在找的JavaScript相关文章