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

Posted 2023-03-07

【中文标题】react-spring 插值函数不适用于打字稿

【英文标题】：react-spring interpolate function not work with typescript

【发布时间】：2019-10-25 02:01:52

【问题描述】：

我决定在我的 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 / 10px,$y / 10px,0)`)/>
        </div>
    );

一切正常。

打字后：

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] / 10px,$xy[1] / 10px,0)`)/>
        </div>
    );

它不起作用，我没有编译错误，只是没有发生翻译。 “样式”没有注入到元素中。

【参考方案1】：

一个有点老的问题，但也许有人需要更好的解决方案。 尝试使用 Stas Krul 提到的插值函数。但您不必将属性 x 和 y 分开。

const trans = (x: number, y: number) => `translate3d($xy[0] / 10px,$xy[1] / 10px,0)`

const Card = () => 
const [props, set] = useSpring< xy: number[] >(() => (
    
        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: interpolate(props.xy, trans)
        />
    </div>
);

【参考方案2】：

对我来说，以前的答案都没有帮助解决这个问题。

深入探索该库，我在声明文件 (node_modules/@react-spring/core/index.d.ts) 中发现了以下几行：

/** Map the value of one or more dependencies */
declare const to: Interpolator;
/** @deprecated Use the `to` export instead */
declare const interpolate: Interpolator;

所以本质上，您现在应该使用to，而不是使用interpolate，如下所示：

import  to  from "react-spring"

<animated.div style= transform: to(props.xy, trans)  />

【参考方案3】：

我通过将xy 更改为将left 和top 属性分开，然后使用从react-spring 包中导出的interpolate 函数（如here）解决了同样的问题。仍然不是一个完美的解决方案，但它肯定比使用// @ts-ignore 抑制错误要好。

【参考方案4】：

我遇到了类似的问题。对于修补程序，只需输入 // @ts-ignore:

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" 
                // @ts-ignore
                style=transform: props.xy.interpolate((xy) => `translate3d($xy[0] / 10px,$xy[1] / 10px,0)`)
            />
        </div>
    );

【讨论】：

有没有办法正确解决这个问题？