私はウェブサイトをこすり、reactを使用して異なる方法で投稿します。私はそれでいくつかの助けが必要です。 divは、スポーン後に自動的に浮上することになっているため、後でWebサイトから新しい投稿を取得する必要があります。ただし、現時点では、Webサイトで利用可能な最初の10件の投稿が浮かび上がっています。今のところ、onClickに基づいて機能するボタンがありますが、投稿は繰り返しではなく、単独で表示されるようにします。
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>
);
}
これが私のloadMore関数です。 「クリックして欲しいのではありません。ただ実行したいだけです。上のコンポーネントと同じコンポーネントにあります。
loadMore(){
let posts = this.state.posts;
let lastPost = posts[posts.length - 1];
$.ajax({
url: this.paginationURL(),
data: { page: lastPost.id },
type: "GET",
dataType: "json",
success: (response) => {
this.setState({
posts: this.state.posts.concat(response.posts)
})
}
})
}
みなさん、助けてくれてありがとう！ さらに情報が必要な場合は、コメントセクションに自由に入力してください。少しでもアイデアがある場合は、リンクを残して読んでください。正しい方向に向けられます。あらゆる種類のヘルプに感謝します！
回答：
回答№1は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")
);
}
});
}
これをテストしませんでした。しかし、これはあなたにいくらかのアイデアを与えるはずです。