REACT：如何在具有特定类名的 div 中渲染组件？

Question

我不确定执行此操作的最佳方法是什么，但是 - 我已经输出了 div 列表。当我点击其中一个时，它会被赋予一个active类。单击 div 后，我需要在该特定类中显示我制作（用于渲染）的组件。我正在使用 next.js 和 React 并一直在使用 CSS 模块。

目前我尝试过： ReactDOM.render(, document.getElementsByClassName(styles.active) ); 但我收到错误错误：目标容器不是 DOM 元素。

Child (InnerDisc) Component

const InnerDisc = (props) => {
   const active = props.active;

   if (active) {
      return ( 
         <div className={styles.wrapper}>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
            <Image className={styles.pic} src="https://picsum.photos/200/300" width={200} height={200}/>
         </div>
       );
   }
  
}

export default InnerDisc;

主要应用程序组件

export default function Home() {
   const [discs, setDiscs] = useState([
      { id: 1, top: 100 },
      { id: 2, top: 200 },
      { id: 3, top: 300 },
      { id: 4, top: 400 },
      { id: 5, top: 500 },
      { id: 6, top: 600 },
      { id: 7, top: 700 },
      { id: 8, top: 800 },
      { id: 9, top: 900 },
      { id: 10, top: 1000 },
      { id: 11, top: 1100 },
      { id: 12, top: 1200 }
   ])

   function enlargeDisc(e, num) {
      let t = e.target
      if (t.classList.contains(styles.active)) {
         t.classList.remove(styles.active)
         discRender()
      } else {
         t.classList.add(styles.active)
         discRender()
      }
   }

   function discRender() {
      ReactDOM.render(
         <InnerDisc/>, document.getElementsByClassName(styles.active)
      );
    }

return (
                  <div className={styles.container}>
                  <div className={styles.wrapper}>
                     {discs.map((item) => (
                        <div className ={styles.disc} key={item.id} style=. 
                       {{top: item.top + 'px'}} onClick={(e)=> 
                         enlargeDisc(e, item.id)}> </div>
                         ))}
                       </div>
                  </div>
                </div>
)
}

Answer 1

首先，您没有在函数中使用“num”，因此它可以是这样的：
函数放大光盘（e）{

      let t = e.target
      if (t.classList.contains(styles.active)) {
         t.classList.remove(styles.active)
         discRender()
      } else {
         t.classList.add(styles.active)
         discRender()
      }
   }

现在您只有事件有参数，您可以将 onClick 放置为：

 {discs.map((item) => (
                        <div className ={styles.disc} key={item.id} style=. 
                       {{top: item.top + 'px'}} onClick={enlargeDisc}> </div>

用函数内的console.log测试什么是接收“enlargeDisc”事件，如果有e.target，你可以使用const clsList = e.target.classList更好地处理，所以你只需要if(classList. “财产”）。

此外，您还可以使用 ReactDOM.render()，制作一个组件 Disc 并使用 State 来处理类属性何时更改或删除。