интерполирующая функция реагировать-пружина не работает с машинописью - PullRequest
Новая
       19

интерполирующая функция реагировать-пружина не работает с машинописью

0 голосов
/ 10 июня 2019

Я решил ввести TypeScript в моем приложении React js.

Возникла проблема с компонентом, использующим реагирующую пружину для интерполяции координат.

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

все работает нормально.

ПОСЛЕ typeScript: 


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

    const calc = (x: number, y: number) => [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((xy) => `translate3d(${xy[0] / 10}px,${xy[1] / 10}px,0)`)}}/>
        </div>
    );
}

Не работает, у меня нет ошибок компиляции, просто не происходит перевод.«Стиль» не вводится в элемент.

...