如何访问嵌套标签内的 react-spring 变量答案

【问题标题】：how to access react-spring variables inside a nested tag如何访问嵌套标签内的 react-spring 变量
【发布时间】：2020-12-13 07:27:04
【问题描述】：

我有以下代码，我想将strokeDashoffset={spring.x.interpolate(x => strokeDasharray - x)} 行移到<polygon ... 标记内。

函数星（道具）{

const strokeDasharray = 156
const spring = useSpring(
    {
        to: { x: strokeDasharray * (props.is/props.max), points: props.is },
    }
)

return(
    <animated.svg
    viewBox="0 0 45 45"
    style={{
        margin: "0px",
        width: "45px",
        height: "45px"
    }}
    strokeDashoffset={spring.x.interpolate(x => strokeDasharray - x)}
    >
        <polygon
        fill="#hite"
        stroke="red"
        strokeDasharray={strokeDasharray}
        points="22.5 35.25 8.68704657 42.5118994 11.3250859 27.1309497 0.150171867 16.2381006 15.5935233 13.9940503 22.5 0 29.4064767 13.9940503 44.8498281 16.2381006 33.6749141 27.1309497 36.3129534 42.5118994" />
    </animated.svg>
)

}

我想要那个，因为我想在 svg 中添加另一个具有其他值的路径。

当我移动它时，动画消失了，路径立即被填满。但为什么？如何访问 polygon 内的 spring.x 值，而不是仅访问 animated.svg 内的值？

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

这比我想象的要容易：

只需使用<animated.polygon ... /> 而不是<animated.svg .../>

【讨论】：