在同一个 div 容器中获取两个不同的 ref

Question

我是编码和反应的新手，并且仍在学习反应中的思考。

我想要多个容器，你点击一个，点击的 div 元素的字体颜色会改变，它会打开它下面的 div。 随后将其反转 onClick。

import React, {useRef, useState} from "react";
import "./style.css";

export default function App() {
   const [clicked, setClicked] = useState(false);
  const Ref1 = useRef();
  const RefShow = useRef()
 

  const Namee = (ref) => {

   if (!clicked) {

     ref.current.style.color = "green";
     RefShow.current.style.display ="block";
     setClicked(true)

     } else { 
       
       ref.current.style.color = "black";
       RefShow.current.style.display ="none";
       setClicked(false)
   }
 
  }
  return (
    
   <div id = "MainContainer">

   <div className ="container">
   <div ref={Ref1} onClick={() => Namee(Ref1)} className="icon-wrapper">
       Click here to show red
       </div>
       <div ref ={RefShow} className ="Showred"> <p>hedy </p></div>

   </div>
   </div>

  );
}

https://stackblitz.com/edit/react-cklj4x?file=src%2FApp.js << 这是要查看的。

我怎样才能自动获取 RefShow 元素而无需键入它，因为我计划添加更多这些容器，完全相同。

任何提示或批评表示赞赏，因为我想尽可能多地学习。 几个月前我还没有听说过 react，也没有开发知识，所以我想我从那以后学到了很多东西。