如何仅更改同一个孩子的样式取决于道具答案

【问题标题】：How to change styling for only one of same children depend on prop如何仅更改同一个孩子的样式取决于道具
【发布时间】：2020-11-23 09:55:13
【问题描述】：

我正在尝试使用字体很棒的图标来实现明星投票，在 Product.js 上，我有 2 个组件，问题是当我更改具有 prop 的组件的样式时，由于 querySelectorAll，它自然会更改其他组件，所以我如何才能更改仅具有我通过的 props 的组件的类。

产品.js

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

对于第一个孩子，我想添加一些样式，例如当我将鼠标悬停在星星上时，它会亮起等。所以我想根据 handleRating 道具制作它。 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));
      };
    });
  }

我没有在下面添加不必要的部分，我在 div 中有图标。

【问题讨论】：

标签： reactjs components

【解决方案1】：

试试：

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

【讨论】：