Question

我知道这可能是一个简单的问题，但不知道要去哪里。我有一个允许用户发出请求的站点，以及一个显示所有请求的仪表板。我想做的只是添加一个简单的无限滚动，因此并非所有请求都立即加载。我只需要基本的功能，一旦您向下滚动一点，它将加载更多的请求。

这就是我的仪表板的样子。

import React from 'react';
import {connect} from 'react-redux';
import requiresLogin from './requires-login';
import LinkButton from './LinkButton';
import { fetchRecs } from '../actions/recommendations';
import { POSTER_PATH_BASE_URL } from '../config';
import {Link} from 'react-router-dom';

import './dashboard.css';

export class Dashboard extends React.Component {
componentDidMount()
{
    this.props.dispatch(fetchRecs());
}

render() {
    let recs;
    if (this.props.recs) {
        recs = this.props.recs.map((rec, index) => {
          return (
            <li key={index} className="card">
              <section className="dash-recommended">
                <section className="dash-movie-poster">
                  <Link to={`/movie/${rec.movieId}`}><img
                    src={POSTER_PATH_BASE_URL + rec.posterUrl}
                    alt="movie poster"
                  />
                  </Link>
                </section>
                <section className="dash-container">
                <section className="dash-rec-user">
                <h3><Link to={`/user/${rec.userId.id}`}>{rec.userId.username}</Link></h3></section>
                <section className="dash-movie-title">
                <h3><Link to={`/movie/${rec.movieId}`}>{rec.title}</Link></h3></section>
                <section className="dash-recommend-desc">
                  <p>{rec.recDesc}</p>
                </section>
                </section>
              </section>
            </li>
          );
        });
      }

    return (
      <section className="dashboard-container">
        <section className="myRecommended">

        <section className="recommended-list">
        <section className="profileButton">
            <LinkButton to='/profile' className='profileBtn'>My Recomendations</LinkButton>
            </section>
            <section className="recommendButton">
        <LinkButton to='/recommend' className='recBtn'>+ Recommend</LinkButton>
        </section>
          <section className="recommendation-header">
            <h2>Recent Activity:</h2>
          </section>
          <ul className="recent-activity">{recs}</ul>
        </section>
        </section>
      </section>
    );
  }
}

这是我一直想使用的无限滚动插件 https://github.com/ankeetmaini/react-infinite-scroll-component

这是github在文档上显示的内容

<InfiniteScroll
 dataLength={items.length} //This is important field to render the next data
 next={fetchData}
 hasMore={true}
 loader={<h4>Loading...</h4>}
 endMessage={
<p style={{textAlign: 'center'}}>
  <b>Yay! You have seen it all</b>
</p>
}
// below props only if you need pull down functionality
refreshFunction={this.refresh}
pullDownToRefresh
pullDownToRefreshContent={
<h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
}
releaseToRefreshContent={
<h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
}>
{items}
</InfiniteScroll>

因此，实际上，我只是想在正确的方向上寻求一个推动力，即从何处开始如何获取我的“记录”的长度以及如何处理“下一个”部分。如果有人拥有添加无限滚动的更简单方法，那就是所有人。

所以林告诉我需要进行一些重构。我有点迷失了要进行这项工作才能重构的内容。

添加React Infinite Scroll

0 个答案: