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

【问题标题】：How to append React components to HTML element using .append()如何使用 .append() 将 React 组件附加到 HTML 元素
【发布时间】：2020-01-24 15:49:04
【问题描述】：

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

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

作为容器。在每次点击 Load more 按钮时，我想将新文章附加到主 html 元素，如下所示：

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

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

【问题讨论】：

您通常不会使用像 append 这样的 DOM 方法来实现您在 React 中寻找的结果。你如何在你的组件中渲染Articles？
Article 真的只是一个javascript函数，你不能附加它并期望它变成HTML
@wlh 我仅将 Articles 渲染两次作为 react-router 路由，具体取决于查询 - Top 或 Best 文章 -在 url 参数中。

标签： javascript reactjs infinite-scroll

【解决方案1】：

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

但是像这样使用 React 的输出通常是一个坏主意。我的建议是在 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>
    );
};

【讨论】：

这就是我正在做的事情，期望我将 JavaScript 逻辑放在 renderArticle() 函数中，因为那里的代码太多......然后只返回 <Article />s 循环就像你做的那样。
你不应该这样做。看看官方的 React 文档，特别是 ReactDOM.render

【解决方案2】：

您可以使用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>
    );
  }
}

【讨论】：