鍍金池/ 問答/HTML/ react如何實(shí)現(xiàn)加載中效果

react如何實(shí)現(xiàn)加載中效果

如圖，類似這樣的效果：

clipboard.png

請(qǐng)求數(shù)據(jù)使用的fetch,想請(qǐng)問一下這種加載中的效果是寫在生命周期中還是寫在fetch請(qǐng)求中呢？
該怎么實(shí)現(xiàn)這樣的效果？

回答
編輯回答
痞性

推薦使用antd-Spin

2017年5月28日 11:52
編輯回答
純妹

看個(gè)還是要看場(chǎng)景。就我個(gè)人來講，我既寫到過請(qǐng)求中，也寫到過組件中。

如果你需要在請(qǐng)求級(jí)別做loading，那么就放在請(qǐng)求。如果你是需要在組件（你可以把它看作是請(qǐng)求的集合）中，那就loading可以寫到組件state中去。

實(shí)現(xiàn)非常簡(jiǎn)單，拿請(qǐng)求級(jí)別來說，只需要fetch前后分別設(shè)置不同的state，view根據(jù)state決定渲染loading與否即可

2018年5月17日 08:46
編輯回答
不討囍

給樓主一個(gè)思路吧：
首先組件初始化的時(shí)候設(shè)置state
loading: false

然后在發(fā)送fetch請(qǐng)求的時(shí)候loading置為true
成功/失敗的時(shí)候再置為false

然后render方法中根據(jù)false|true 動(dòng)態(tài)改變loading組件是否顯示

2018年6月9日 08:46
編輯回答
殘淚

這東西寫在全局tools文件中好，因?yàn)橹灰{(diào)接口都能用到。

const tools = {
/**
 * 顯示loading框
 * @return {[type]}
 */
showLoading() {
    if (this.loadingCount <= 0) {
        ReactDOM.render(
            <div className="sy-loadingwrap">
                <Spin size="large"></Spin>
            </div>,
            document.getElementById("sy-loading")
        );
    }
    this.loadingCount++;
},
/**
 * 隱藏loading框
 * @return {[type]}
 */
hideLoading() {
    if (this.loadingCount === 0) return;
    this.loadingCount--;
    if (this.loadingCount === 0) {
        ReactDOM.unmountComponentAtNode(document.getElementById("sy-loading"));
    }
},
}

在ajax send之前調(diào)用一下tools.showLoading(),在ajax 請(qǐng)求完成的complete中在調(diào)用一下tools.hideLoading()

2017年9月24日 18:06