Javascript 附加到reactJs中的无限滚动

我正在制作一个带有帖子的无限卷轴

我有一个名为

AllPosts

和

Post

的react类。所有帖子呈现多个

Post

s

我有以下代码：

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

ReactDOM.render(
,
document.querySelector（呈现到）
);

下面是方法

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

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

//呈现所有帖子
var AllPosts=React.createClass({
渲染：函数（）{
返回(
{this.props.data.map（函数（元素，i）{
返回
})}
); .....

---

但是，我在scroll中有一个事件，我想添加另一个react帖子。我如何才能做到这一点？

这是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>          
    );
  }
});

var AllPosts=React.createClass({
getInitialState（）{
//从一个空的帖子数组开始。
//理想情况下，您希望该组件执行数据获取。
//如果数据来自非反应源，如您的示例所示，
//您可以执行“posts:this.props.posts”，但这是一种反模式。
返回{posts:[]}
},
组件willmount（）{
//获取帖子的初始列表
//我在这里假设您有一些外部方法
//发布，并在回调中返回它们。
//（很抱歉使用了箭头功能，它们太整洁了！）
ajaxMethodToFetchPosts（posts=>{
this.setState（{posts:posts}）；
})
},
componentDidMount（）{
//将滚动处理程序附加到此处，以获取新帖子
//在一个真实的例子中，您将希望限制此操作，以避免过多的请求
window.addEventListener（'scroll'，（）=>{
ajaxMethodToFetchPosts（posts=>{
这是我的国家({
posts:this.state.posts.slice（）.concat（posts）
});
});
});
},
render（）{
//渲染方法未更改：）
返回(
{this.props.data.map（函数（元素，i）{
返回
})}
);
}
});

对于其他框架，您必须处理滚动位置（如果元素完全重新渲染，元素会立即消失，滚动位置会重置）

React的

render

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