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

Question

我有这个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组件附加到特定的元素？

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

​

​