Css 根据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>
    );
}

displayHearts=content=>{
//内容是一个浮点数，值介于0和5之间
//根据内容的不同，返回的内容也会有所不同
返回(
{content}

-->根据内容显示5颗红心，灰色或红色
);
}

以下是我希望其外观的示例：

我可以安装任何模块来帮助我做到这一点。 任何帮助都将不胜感激。

---

谢谢大家!

一种方法是在上面渲染5个灰色的心和5个绝对定位的红色的心，然后使用

内容

道具计算出多少红色的心应该是可见的

示例

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>
  );
}

函数HeartScoreIndicator（{content}）{
返回(
{Array.from（{length:5}，（{，index）=>(
))}
{Array.from（{length:5}，（{，index）=>(
))}
);
}

一种方法是在其上方渲染5个灰心和5个绝对定位的红心，并使用

内容

道具计算出多少红心应该可见

示例

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>
  );
}

函数HeartScoreIndicator（{content}）{
返回(
{Array.from（{length:5}，（{，index）=>(
))}
{Array.from（{length:5}，（{，index）=>(
))}
);
}

您可以使用packageThank you@Sumanth获得帮助。我测试了这个软件包，它非常接近我想要实现的目标，但是它看起来无法显示，比如说在我的评级为2.6的情况下，它不能显示图标的三分之二，或者至少我不知道如何显示。你可以使用软件包谢谢@Sumanth的帮助。我测试了这个软件包，它非常接近我想要实现的目标，但是它看起来无法显示，比如说在我的评级为2.6的情况下显示三分之二的图标，或者至少我不知道如何显示。太棒了！它的效果几乎是奇迹。如果你不介意的话，可以问两个简短的问题：是否可以使用你的解决方案：-将分数显示在心脏的左侧；-心脏是否根据调用函数的div的大小调整大小？非常感谢，这已经是一个巨大的进步@拉格纳太棒了！那不是你问题的一部分。回答完问题后请不要改变。如果你觉得我的答案回答了你原来的问题，如果你不知道如何扩展它，你可以创建一个新问题。明白了，我会创建一个新问题。再次感谢！太神了它的效果几乎是奇迹。如果你不介意的话，可以问两个简短的问题：是否可以使用你的解决方案：-将分数显示在心脏的左侧；-心脏是否根据调用函数的div的大小调整大小？非常感谢，这已经是一个巨大的进步@拉格纳太棒了！那不是你问题的一部分。回答完问题后请不要改变。如果你觉得我的答案回答了你原来的问题，如果你不知道如何扩展它，你可以创建一个新问题。明白了，我会创建一个新问题。再次感谢！