小编Man*_*anu的帖子

react-spring 插值函数不适用于打字稿

我决定在我的 React js 应用程序中引入 TypeScript。

使用 react-spring 进行坐标插值的组件有问题。

在 TypeScript 之前,我的组件是这样的:


function Card() {
    const [props, set] = useSpring(() => (
        {
            xy: [0, 0],
            config: {mass: 10, tension: 550, friction: 140}
        }));

    const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2]

    return (
        <div onMouseMove={({clientX: x, clientY: y}) => set({xy: calc(x, y)})}>
            <animated.div className="card1" style={{transform: props.xy.interpolate((x,y) => `translate3d(${x / 10}px,${y / 10}px,0)`)}}/>
        </div>
    );
}

Run Code Online (Sandbox Code Playgroud)

一切正常。

打字稿后:


function Card() {
    const [props, …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-spring

5
推荐指数
1
解决办法
2684
查看次数

标签 统计

react-spring ×1

reactjs ×1

typescript ×1