如何访问嵌套标记中的react spring变量

Question

我有下面的代码，我想在上面移动<polygon ...标记内的行strokeDashoffset={spring.x.interpolate(x => strokeDasharray - x)}。

功能之星(道具(｛

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中的值？

Answer 1

这比我想象的要容易得多：

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