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

Question

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

我无法实现的是相同的，但是对于悬停，我的意思是如果我悬停在第三颗星上，我希望前 3 颗星星是黄色的，在我的鼠标中，如果它们被悬停并且那些选择的星星保持黄色，则让那些未选择的星星恢复为灰色。

当我使用选定的布尔值更改星形的类时，我尝试了在星形组件和useState的用法中使用悬停的布尔值，就像对于[星星选择，选择星形]

一样StarRating.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 } 
/>
);

我不确定我是否有机会以这种方式解决我的问题，somone 可以解释我错过了什么或引导我开始新方法？ 谢谢

Answer 1

你也可以把selected || hovered放到className中，这样"start-selected"css类只有在选择开始而不是悬停时才适用

还要像下面这样更改StarRating.jsx，使其在单击后不会悬停

const StarRating = (props) => {
...
<Star
...
onClick={() => {
selectStar(i + 1);
selectHover(0);
}}
...
/>
))}