Как добавить компоненты React к элементу HTML, используя .append () - PullRequest
Новая
       25

Как добавить компоненты React к элементу HTML, используя .append ()

0 голосов
/ 24 января 2020

Я пытаюсь реализовать бесконечную прокрутку в моем блоге, в качестве контейнера у меня есть 

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 узлы, я что-то упускаю?

Ответы [ 2 ]

1 голос
/ 24 января 2020

Вы можете попробовать это, используя Array.slice() - Демо 

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>
    );
  }
}
1 голос
/ 24 января 2020

Вы можете использовать render из ReactDOM, чтобы отобразить компоненты в скрытый узел 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>
    );
};
...