reactjs - react-spring interpolate 函数不适用于打字稿
问题描述
我决定在我的 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>
);
}
一切正常。
打字稿后:
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>
);
}
它不起作用,我没有编译错误,根本没有发生翻译。“样式”不会注入到元素中。
解决方案
对我来说,以前的答案都没有帮助解决这个问题。
深入探索该库,我在声明文件 ( 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;
所以本质上interpolate
,你现在应该使用 ,而不是使用to
,如下所示:
import { to } from "react-spring"
<animated.div style={{ transform: to(props.xy, trans) }} />
推荐阅读
- ruby-on-rails - Vue 资源被 CORS 策略阻止
- git - 如何获取存储库中所有分支的名称?
- java - Repl.it Java SWING,控制台一直以找不到主类结束,我该如何添加?
- python - 如何在 Python 中搜索 Numpy 数组中的数字
- opengl - 使不同着色器程序中的着色器存储缓冲区可访问
- angularjs - .net 核心身份令牌端点因来自网站而不是来自邮递员的 api 调用而失败
- r - 按连续值出现分组
- javascript - 如何在所选图像上打勾
- c# - UWP/XAML 以编程方式单击带有 UI 动画的按钮
- rails-activestorage - 视图/渲染中的 ActiveStorage