Question

我制作了这个东西，它会刮掉一个网站并以不同的方式发布它。我需要一些帮助。这些div应该在产生后自行浮动，然后他们应该从网站上获得新的帖子。但是，现在，它只是浮现在网站上可用的前10个帖子中。现在我有一个基于onClick功能的按钮，但我希望这些帖子能够自行发布而不重复。

if array.containsObject( "None" ){
        print("\(array.indexOfObject("None"))")
        let noneIndex = array.indexOfObject("None")
        print(noneIndex)
        array.removeObject(noneIndex)
        print("Remove Array:-\(array)")
        array.insertObject(noneIndex, atIndex: (array.lastObject?.index)!)
        print("Sorted Array:-\(array)")
    }

这是我的loadMore函数。我不希望它被点击。我只想让它运行。它与上面的组件相同。

render() {
 return (
  <div>

    {/*I have a component elsewhere*/}
    {this.state.posts.map((post) => {
      return (<Post post={post} key={post.id}></Post>);
    })}

    <div className="load-more">
      <a className="btn btn-primary btn-block" onClick=this.loadMore.bind(this)>Load more</a>
    </div>
   </div>
 );
}

感谢大家的帮助！如果您需要更多信息，请随时将其放在评论部分下。如果您只是一个小小的想法，请随时留下链接供我阅读，以便我能指出正确的方向。各种帮助表示赞赏！

Answer 1

如果我的问题是正确的，那么你必须将你的抓取机制放在一个轮询/间隔中，以便在你抓取新数据时更新DOM。

类似的东西：

// Lets say this is where you need to put the scraped posts
const wherePostsShouldBe = <div id="posts"></div>;

// Auto-run the scraping every 3 seconds.
setInterval(scrapePosts(), 3000)

// Do the scraping
function scrapePosts() {

  $.ajax({

    url: 'http://where-to-scrape-things.com',
    type: 'GET',
    dataType: 'json',

    success: (response) => {
      // So we scraped some data. Now update the element with these.
      // This actually re-renders everything again including old and potentially new data.
      // But its ok to stay primitive for now. Including simply displaying the entire data we got without serializing.
      ReactDOM.render(
        response.posts,
        document.getElementById('posts')
      );
    }

  });

}

Haven没有测试过这个。但这应该会给你一些想法。

ReactJS：运行函数从不同页面生成元素而不进行交互

1 个答案: