Reactjs 如何在涉及多个三元组的情况下动态更改类名？

我有一个星号组件，它用黄色的“.star selected”css类显示选中的星号，用灰色的“.star unselected”类显示选中的星号。和一个选择的布尔值初始化为false。这部分工作正常

我不能实现的是相同的，但对于悬停，我的意思是，如果我悬停在第三颗星上，我希望前三颗星是黄色的，在我的鼠标中，如果悬停，未选中的将返回灰色，选中的将保持黄色

当我用所选bool更改star的类时，我在star组件中使用悬停bool和useState时尝试了相同的方法，就像在[starsSelected，selectStar]中一样

starting.jsx的一部分

const StarRating = (props) => {

    const [starsSelected, selectStar] = useState( 0 );
    const [starsHovered, selectHover] = useState( 0 );
    const totalStars = props.nbStar;

    return (
        <div>
            <h1>{ props.title }</h1>
            <div className="star-rating">

            {[...Array(totalStars)].map((starItem, i) => (
                <Star
                key={i}
                id={i}
                selected={i < starsSelected}
                hovered={i < starsHovered}
                onClick={() => {
                    selectStar(i + 1);
                }}
                onMouseEnter={() => {
                    selectHover(i + 1);
                    {/* selectStar(starsHovered); */}
                }}
                onMouseLeave={() => {
                    selectHover(0);
                    {/* selectStar(starsSelected); */}
                }}
                />
            ))}

Star.jsx的一部分

const Star = ({ 
    hovered = false, 
    selected = false, 
    onClick = f => f, 
    onMouseEnter = f => f,
    onMouseLeave = f => f
}) => 
    (
    <div  
    className={       
        selected
        ? 'star-selected star'
        : 'star-unselected star'
    } 
    onClick={ onClick }
    onMouseEnter={ onMouseEnter } 
    onMouseLeave={ onMouseLeave } 
    />
    );

我不确定我是否有机会以这种方式解决我的问题，有人能解释我错过了什么，或者引导我寻求一种新的方法吗？ 谢谢

您还可以将选中的| |悬停放在className中，这样，只有在选中且未悬停的情况下，启动选中的css类才会应用

还可以像下面那样更改starting.jsx，使其在单击后不会悬停

const StarRating=道具=>{ ... { 选择Stari+1； 选择hover0； }} ... /> }

---

它解决了我的问题，它是“选中的| |悬停”而不是&&谢谢！