是否将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 Components附加到特定元素的方法？

Answer 1

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

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

const PhotoCollage = ({ author }) => {
  const childRef = useRef([]);

  useEffect(() => {
    childRef.current.forEach(ref => {
      console.log(ref);
    });
  }, []);

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