将 React 组件附加到 JSX 之外的元素？答案

【问题标题】：Appending React Components to Elements outside of JSX?将 React 组件附加到 JSX 之外的元素？
【发布时间】：2020-09-02 15:04:22
【问题描述】：

我有这个 React 组件：

import React, { useEffect } from 'react'
import styles from './_PhotoCollage.module.scss'
import PhotoCard from '../PhotoCard'

const PhotoCollage = ({ author }) => {
  let i = 1
  useEffect(() => {
    author.posts.forEach(post => {
      document.getElementById(`collage-${i}`).appendChild(<PhotoCard/>)
      i++
      if (i > 4) i = 1
    })
  }, [])

  return (
    <div className={styles.photoCollage}>
      <div className={styles.col} id="collage-1"/>
      <div className={styles.col} id="collage-2"/>
      <div className={styles.col} id="collage-3"/>
      <div className={styles.col} id="collage-4"/>
    </div>
  )
}

export default PhotoCollage

appendChild() 根本不喜欢这个。

我可以轻松地在每个 <div className={styles.col} id="collage-X"/> 内创建四个循环，但我想找到一种方法用一个循环来执行此操作，因为它看起来更干净，而且我想会更优化/更快。

有没有办法使用 DOM 将 React 组件附加到特定元素？

【问题讨论】：

命令式操作 DOM 可能是个坏主意，React 可以轻松覆盖您的更改。你为什么要这样做？
为什么要这样做？为什么不用 React 来实现呢？此外，像您一样查询 DOM 是一种反模式。此外，appenchild 用于 HTML 元素而不是 ReactElements，您是否尝试将appendChild 与 HTML 元素一起使用？
使用 DOM 是我可以看到我能够用一个循环而不是四个循环填充这些元素的唯一方法。
为什么需要使用 DOM？你有 React 组件 PhotoCard，你为什么要在 DOM 上附加一个 ReactElement ？你有 React 来处理它。

标签： javascript reactjs components

【解决方案1】：

使用 React，您可以执行以下操作：

const PhotoCard = ({ id }) => <div>Photo-{id}</div>;

const PhotoCollage = () => {
  return (
    <div>
      {[...Array(5).keys()].map(key => (
        <div key={key} id={`collage-${key}`}>
          <PhotoCard id={key} />
        </div>
      ))}
    </div>
  );
};

【讨论】：