IT技术 - 是否有一种简单的方法或解决方法可以根据 React 中变量的值显示不同外观的图像？ - 吾爱随笔录

我正在为我的公司创建一个网站。我完全没有经验，我在那里作为实习生工作。我必须在这个网站上做一个报告。5 颗心中的其中一个字段显示取决于变量的值：如果变量的值为 2.5，则心 1 和 2 将填充为红色，心 3 将是半红半灰，其他将是灰色。

我做了一些关于如何在 React 和 css 中操作图像的研究，我发现了过滤器，尤其是灰度选项。可悲的是，我找不到只为图像的一部分设置它的方法。

这个想法是在我的组件的渲染方法中调用一个方法，如下所示：

displayHearts = content => {
    // content is a float, value between 0 and 5
    // depending on the content, the return would be different
    return (
        <div>
            <p>{content}</p>
            --> display of 5 hearts, gray or red depending on content
        </div>
    );
}

这是我希望它看起来像的示例：

https://ibb.co/VYBzXtQ

我可以安装任何module来帮助我做到这一点。任何帮助，将不胜感激。谢谢！

function HeartScoreIndicator({ content }) { return ( <div style={{ display: "inline-block", position: "relative" }}> <div> {Array.from({ length: 5 }, (_, index) => ( <img key={index} src="/images/grey-heart.png" /> ))} </div> <div style={{ position: "absolute", top: 0, left: 0, width: `${content * 20}%`, whiteSpace: "nowrap", overflow: "hidden" }} > {Array.from({ length: 5 }, (_, index) => ( <img key={index} src="/images/red-heart.png" /> ))} </div> </div> ); }