反应：如何在具有特定类名的 div 中呈现组件？答案

【问题标题】：REACT : How to render component inside a div with specific classname?反应：如何在具有特定类名的 div 中呈现组件？
【发布时间】：2022-08-21 03:35:50
【问题描述】：

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

目前我试过：ReactDOM.render( <InnerDisc/>, document.getElementsByClassName(styles.active) ); 但我收到一个错误Error: Target container is not a DOM element.

子（InnerDisc）组件

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

导出默认 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>
)
}

标签： reactjs react-component react-dom react-component-unmount

【解决方案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()
      }
   }
现在您只有 event has 参数，您可以将 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."property" ）。

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

【讨论】：