Question

我正在尝试hooks的反应，我想用React Hooks重写Antd-mobile ListView，这是一个演示，这是我的半成品代码：

import React, {useState, useEffect} from "react"
import {ListView, WhiteSpace, Grid,Card} from 'antd-mobile';
import axios from "axios";


function ArticleList() {
    const [articles, setArticles] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [height, setHeight] = useState((document.documentElement.clientHeight * 3) / 4);
    let page=1;

    useEffect(() => {
        const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;  //sentence 1
        getArticleList().then(res => {
           setArticles([...articles,...res.data.article_list]);
           setIsLoading(false);
           setHeight(hei);
        });
    },[]);

    const getArticleList = params => {
        return axios.get('/api/articles', params).then(res => {
            return res.data
        }, err => {
            return Promise.reject(err);
        }).catch((error) => {
            return Promise.reject(error);
        });
    };


    let onEndReached = (event) => {
        if (isLoading && !this.state.hasMore) {return;}
        setIsLoading(true);
        getArticleList(++page).then(res => {
            setArticles([...articles,...res.data.article_list]);
            setIsLoading(false);
        });
    };

    const row = (rowData) => {
        return (
            <div key={rowData.id}>
                //...
            </div>
        );
    };

    return (
        <ListView
            ref={el => this.lv = el}  //sentence 2
            dataSource={articles}
            renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>{isLoading ? 'Loading...' : 'Loaded'}</div>)}
            renderRow={row}
            style={{height: height,overflow: 'auto',}}
            pageSize={4}
            onScroll={() => { console.log('scroll'); }}
            scrollRenderAheadDistance={500}
            onEndReached={onEndReached}
            onEndReachedThreshold={10}
        />
    );
}

export default ArticleList;

问题：

问题与下面的两个句子有关，可以在上面的代码中找到它们：

1、const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
2、ref={el => this.lv = el}

原始示例使用类组件，因此它具有ReactDOM和this，当我用功能组件重写它时，如何重写这两个句子。

用React Hooks重写Antd ListView时如何处理ref？

0 个答案: