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

我正在尝试对我的博客实现无限滚动，我有

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

作为容器。每次点击装载更多按钮 我想将新文章附加到主 html 元素，如下所示：

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

然而，results是一堆<Article/>反应组件而不是 html 节点，我错过了什么吗？

你可以使用render from ReactDOM将组件渲染到隐藏的 HTML 节点中，然后将该节点的内容附加到另一个节点。

但是像这样使用 React 的输出通常是bad idea。我建议在 React 中构建整个组件。

例如：

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