Reactjs 如何仅为一个相同的子项更改样式取决于道具

我正在尝试用字体很棒的图标进行明星投票， 在Product.js上，我有2个组件，问题是当我为一个有道具的组件更改样式时，它自然会因为querySelectorAll而更改其他组件，所以我如何为唯一一个有道具的组件更改类

Product.js

const [rating, setRating] = useState(0);
const ratingHandler = (e) => {
    setRating(e);
  };
 <Rating  handleRating={ratingHandler} />
 <Rating />

const[rating，setRating]=useState（0）；
const ratingHandler=（e）=>{
设定值（e）；
};

对于第一个孩子，我想添加一些造型，比如当我把鼠标移到星星上时，星星会亮起来，等等。所以我想让它基于可操控的道具。 Rating.js

const Rating = (handleRating = false) => {
  useEffect(() => {
    if (handleRating) {
      hover();
    }
  }, []);

 function hover() {
    const spans = document.querySelectorAll(".ratinger span:not(.texting)");
    console.log(spans);
    spans.forEach((spanon) => {
      const onStar = parseInt(spanon.dataset.value, 10);
      spanon.onmouseover = () => {
        spans.forEach((span) =>
          span.dataset.value <= onStar
            ? span.classList.add("hover")
            : span.classList.remove("hover")
        );
      };
      spanon.onmouseout = () => {
        spans.forEach((span) => {
          span.classList.remove("hover");
        });
      };
      spanon.onclick = () => {
        spans.forEach((span) =>
          span.dataset.value <= onStar
            ? span.classList.add("onclick")
            : span.classList.remove("onclick")
        );
        handleRating(parseInt(spanon.dataset.value, 10));
      };
    });
  }

const Rating=（handleRating=false）=>{
useffect（（）=>{
if（手动）{
悬停（）；
}
}, []);
函数hover（）{
const span=document.queryselectoral（“.ratinger span:not（.texting）”）；
控制台日志（spans）；
span.forEach（（spanon）=>{
const onStar=parseInt（spanon.dataset.value，10）；
spanon.onmouseover=（）=>{
span.forEach（（span）=>
span.dataset.value{
span.forEach（（span）=>{
span.classList.remove（“悬停”）；
});
};
spanon.onclick=（）=>{
span.forEach（（span）=>
span.dataset.value尝试：

const node = ReactDOM.findDOMNode(this);
const spans = node.querySelectorAll('...');