元素的 ReactJS 'offset'属性'stop'不应用作为参数传递的值

Question

const StarIcon = ({ starNumber, stars }) => {
const starOffsetCalc = () => {
console.log(starNumber, stars);
if (stars === 0) {
return 0;
}
if (stars >= starNumber) {
return 100;
} else if (stars - starNumber > 1) {
return 0;
} else {
return Math.round((1 - (starNumber - stars)) * 100);
}
};
const starOffsetValue = starOffsetCalc() + "%";
return (
<svg
aria-hidden='true'
focusable='false'
data-prefix='fas'
data-icon='star'
className='star-svg'
role='img'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 576 512'
>
<defs>
<linearGradient id='lg'>
<stop offset='0' stop-opacity='1' stop-color='red' />
<stop offset={starOffsetValue} stop-color='red' />
<stop offset={starOffsetValue} stop-color='white' />
<stop offset='100%' stop-opacity='1' stop-color='white'></stop>
</linearGradient>
</defs>
<path
fill='url(#lg)'
d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'
></path>
</svg>
);
};

作为参数传递给"stop"元素的偏移量属性不起作用。在这里，我尝试创建一个基于评级的部分填充背景的星形SVG。当我使用一个简单的字符串作为偏移属性时，它可以正常工作

Answer 1

我理解我的问题。原因在于线性梯度元素的ID。如果有一个以上的StarIcon组件，它应该是唯一的。