如何使用 .append() 将 React 组件附加到 HTML 元素

Question

I am trying to implement infinite-scroll to my blog, I have

const articlesHTML = document.querySelector(".articles");

as container. On each click on Load more button I want to append the new articles to the main html element, like this:

const results = articles
      .slice(0, 10 * pager)
      .map((articleID, i) => (
        <Article key={i} id={articleID} />
      ));
articlesHTML.append(results);

however, results is bunch of <Article/> react components not html nodes, am I missing something?

Answer 1

You could use render from ReactDOM to render the components into a hidden HTML node and then append the contents of that node to another node.

But using React's output like that is generally a bad idea . What I would suggest is building the entire component in React.

For example:

const App = () => {
    const [articles, setArticles] = useState([]);
    const loadMore = useCallback(() => {
        setArticles(...);
    }, [setArticles]);

    return (
        <div className="app">
             {articles.map((article) => <Article key={article.uuid} ... />)}
             <button onClick={loadMore}>Load more</button>
        </div>
    );
};

Answer 2

You can try like this by using Array.slice() - Demo

class Home extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      lists: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      limit: 3
    };
  }
  addMore = () => this.setState(prev => ({ limit: prev.limit + 3 }));
  render() {
    const { lists, limit } = this.state;
    return (
      <div>
        {lists.slice(0, limit).map(list => (
          <p style={{ background: "lightgrey" }} key={list}>
            {list}
          </p>
        ))}
        {limit !== lists.length && (
        <button onClick={this.addMore}>Load More</button>
        )}
      </div>
    );
  }
}