附加到 reactJs 中的无限滚动

Question

我正在 ReactJs 中使用帖子进行无限滚动。

我有一个名为 AllPosts 和 Post 的反应 class。所有 Post 渲染多个 Post。

我有这个代码：

ReactDOM.render(
    <AllPosts data={posts} />,
    document.querySelector(render_to)
);

下面是方法

// Render all posts
var AllPosts = React.createClass({

    render: function () {
        return (
            <div>
                {this.props.data.map(function(element, i) {
                    return <Post data={element} />
                })}
            </div>
        ); .....

但是，我在滚动中有一个事件，我想附加另一个反应 Post。我该怎么做？

Answer 1

这是 React 最擅长的事情之一:)

假设您不想使用 Flux/Redux 实现，我会将 posts 数据设置为根组件上的状态。这样，当 posts 改变时，组件将重新渲染：

var AllPosts = React.createClass({
  getInitialState() {
    // Start with an empty array of posts.
    // Ideally, you want this component to do the data fetching.
    // If the data comes from a non-react source, as in your example,
    // you can do `posts: this.props.posts`, but this is an anti-pattern.
    return { posts: [] }
  },

  componentWillMount() {
    // Fetch the initial list of posts
    // I'm assuming here that you have some external method that fetches
    // the posts, and returns them in a callback.
    // (Sorry for the arrow functions, it's just so much neater with them!)
    ajaxMethodToFetchPosts(posts => { 
      this.setState({ posts: posts });
    })
  },

  componentDidMount() {
    // Attach your scroll handler here, to fetch new posts 
    // In a real example you'll want to throttle this to avoid too many requests
    window.addEventListener('scroll', () => {
      ajaxMethodToFetchPosts( posts => {
        this.setState({
          posts: this.state.posts.slice().concat(posts)
        });
      });
    });
  },

  render() {
    // Render method unchanged :)
    return (
      <div>
        {this.props.data.map(function(element, i) {
          return <Post data={element} />
        })}
      </div>          
    );
  }
});

对于其他框架，您必须处理滚动位置（如果元素完全重新呈现，元素会暂时消失并且您的滚动位置会重置）。

React 的 render 函数实际上并不只是将其输出呈现给 DOM；它将潜在输出与已经存在的输出进行比较，并且仅应用差异。这意味着只有新帖子会添加到 DOM，您的滚动位置不会受到影响。

附加到 reactJs 中的无限滚动

Append to infinite scroll in reactJs

javascript

infinite-scroll

reactjs