Reactjs 通过useEffect钩子在本地状态更改后更新DOM

第一次使用默认组件渲染组件。在父组件从API获取可选数据之后，我需要更新DOM。当前，在useEffect中设置本地状态时已成功重新加载组件。我需要调用一个函数，该函数根据新状态更改span元素的属性

useEffect(() => {
        setCurrentRating(props.rating);
        console.log('Runned only first time', currentRating);
        // needed to call setRating function that changes the color of star elements
    }, [props.rating]);

    const setRating = (ev) => {
        console.log('Setting initial retting', currentRating);
        const starElements = ratingEl.current.getElementsByClassName('star');
        Array.from(starElements).forEach(starEl => {
          starEl.style.color =
            currentRating >= starEl.dataset.value ? 'green' : 'gray';
        });
    } 

---

React不希望您编辑DOM，这是React的工作，而不是您。您必须有一个与道具交互的组件，在React中直接操作DOM是反模式的。在state/props/JSX中描述要呈现给DOM的内容，并对其进行React处理。