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

Question

我有这个反应组件：

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 组件附加到特定元素？

标签： javascriptreactjscomponents

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