Question

<Query query={getArticlesQuery} pollInterval={0} notifyOnNetworkStatusChange={true}>

          {
            ({ data, networkStatus, error, loading, refetch }) => {
              if (networkStatus === 4) { return <Reloading /> }
              if (loading) { return <Loading /> }
              if (error) { return <Error /> }

              //Received required data from query response
              const articles = data.articles;


              return (
                <div onScroll={(e)=>{console.log("test")}}>
                  <div className="refetchbutton">
                    <button onClick={() => { refetch() }}>Refetch!</button>
                  </div>
                <AllPosts allArticles={articles} onScroll={(e)=>{console.log("test")}}/>


                </div>

              )

            }
          }

        </Query>

Allposts.js

class AllPosts extends React.Component{

    render(){

    let articles_p = this.props.allArticles;

    return(
        articles_p.map((article) => { return <Post key={article.id} data={article} /> })
    );

}
}

我有一个Apollo查询组件，它接收数据作为响应。该响应被传递到另一个名为“ AllPosts”的组件，该组件返回组件“ Post”的数组。但是，它们大约是122条，并且在帖子附带的图像的中间部分，我必须连续滚动直到最后一篇帖子。我想使用onScroll通知我何时滚动一个元素。我目前拥有的代码似乎无法正常运行，有人对为什么有任何想法吗？

如何使用React onScroll

0 个答案: