javascript - 我应该使用什么来在React OR Javascript中显示实时图标？像杯子里装了多少咖啡？

我想创建带有很多实时图标的仪表板。实时图标表示图标内容将动态变化。

例如：-假设我有一个咖啡杯图标，根据售出的咖啡数量，杯子中的咖啡水平会上升。

我尝试使用SVG和CSS解决它。下面是实时代码沙箱DEMO示例。 （我在下面发布了相同的代码）
https://codesandbox.io/s/fill-coffee-to-svg-1sfb0
我到底在做什么，是在SVG组件之上，我使用div节点并在div标签上应用了CSS。

问题是，在SVG中动态管理路径/点非常困难，对于不同的屏幕版本也将很困难。

任何人都可以为此建议任何更好的方法。

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  state = { height: 4 };

  setHeight = (e, fillType) => {
    e.preventDefault();
    console.log(this.state.height);
    if (this.state.height < 100) {
      if (fillType === "fill") {
        this.setState({
          height: this.state.height + 2
        });
      }
    }
    if (this.state.height >= 2) {
      if (fillType === "drink") {
        this.setState({
          height: this.state.height - 2
        });
      }
    }
  };
  render() {
    return (
      <div>
        <svg width="255" height="224" xmlns="http://www.w3.org/2000/svg">
          <g>
            <rect
              fill="#fff"
              id="canvas_background"
              height="226"
              width="257"
              y="-1"
              x="-1"
            />
            <g
              display="none"
              overflow="visible"
              y="0"
              x="0"
              height="100%"
              width="100%"
              id="canvasGrid"
            >
              <rect
                fill="url(#gridpattern)"
                stroke-width="0"
                y="0"
                x="0"
                height="100%"
                width="100%"
              />
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <path
              stroke="#000"
              id="svg_1"
              d="m78.82963,176.75921l97.93778,0c14.11708,-0.03733 23.74788,-17.00704 23.70086,-34.46505l0,-11.73873c27.94999,-0.03136 48.22814,-30.02253 48.21769,-64.99381c0.01045,-35.59398 -19.86965,-64.83701 -43.00946,-64.81162l-150.95938,0l0,141.54714c0.02194,19.22158 11.60543,34.42772 24.1125,34.46207zm121.63551,-149.38391l0,0l5.20823,0c19.14875,-0.04331 25.29102,25.83983 25.19908,38.38045c0.01881,20.24897 -10.47393,39.66916 -30.40731,37.78463l0,-76.16508zm-199.71514,158.00316c0.01776,26.16387 13.9729,38.29683 25.20535,38.37149l202.59351,0c13.39827,-0.07466 25.14161,-15.13147 25.20117,-38.37149l-253.00002,0z"
              stroke-width="1.5"
              fill="#fff"
            />
          </g>
        </svg>
        <div
          style={{
            position: "absolute",
            left: "63px",
            top: "9px",
            height: "175px",
            width: "145px",

            borderBottomLeftRadius: "25px",
            borderBottomRightRadius: "25px",
            overflow: "auto"
          }}
        >
          <div
            style={{
              height: this.state.height + "%",
              width: "100%",
              position: "absolute",
              bottom: "0",
              zIndex: 1000,
              background: "green",
              transition: "all .4s"
            }}
          />
        </div>
        <button onClick={e => this.setHeight(e, "fill")}>
          fill more cofee +
        </button>
        <button onClick={e => this.setHeight(e, "drink")}>drink cofee -</button>
      </div>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

最佳答案

您是否尝试过使用react-spring库？

在react-spring文档的基础部分（可在此处找到-https://www.react-spring.io/docs/hooks/basics）中给出以下代码片段：

const props = useSpring({ x: 100, from: { x: 0 } })
return (
  <animated.svg strokeDashoffset={props.x}>
    <path d="..." />
  </animated.svg>
)

以您的咖啡杯为例，如果将咖啡杯与填充咖啡杯的咖啡分开放置，并且咖啡行程向上，则可以使用此技术为咖啡高度设置动画。

编辑：

在使用类组件时，您将为此使用渲染道具API-https://www.react-spring.io/docs/props/spring

<Spring
  from={{ x: 100 }}
  to={{ x: 0 }}>
  {props => (
    <svg strokeDashoffset={props.x}>
      <path d="..." />
    </svg>
  )}
</Spring>