带有反应弹簧的打字稿。属性'interpolate'在类型 'number' 上不存在

Question

i使用react-spring与打字稿。当我将本机渲染与React-Spring一起使用时，我会收到插值函数的错误消息。

"属性'interpaly'不存在于类型'数字'"

我试图将接口引入弹簧组件内部道具，但我无法摆脱各种错误消息。

import * as React from 'react';
import { FC, useState } from 'react';
import { Spring, animated as a } from 'react-spring/renderprops';
interface Props {
onClick: Function;
}
/*interface SpringProps {
scale: number | Scale;
}
interface Scale {
interpolate: Function;
}*/
const SpringButton: FC<Props> = ({ onClick }) => {
const [pressed, setPressed] = useState(false);
return (
    <Spring native from={{ scale: 1 }} to={{ scale: pressed ? 0.8 : 1 }}>
    {(props /*: SpringProps*/) => (
        <a.button
        style={{
            height: '100px',
            width: '100px',
            transform: props.scale.interpolate(scale => `scale(${scale})`) 
        }}
        onMouseDown={() => setPressed(true)}
        onClick={e => {
            setPressed(false);
            onClick(e);
        }}
        onMouseLeave={() => setPressed(false)}
        >
        Click me
        </a.button>
    )}
    </Spring>
);
};
export default SpringButton;

https://codesandbox.io/s/34zopyr8zq

Answer 1

为什么

使用React-Spring的Render-Props版本时，插孔的使用方式与挂钩版本略有不同。interpolate在scale上不存在，因为scale只是一个普通的旧数，而不是对象。

修复

您将需要首先导入插值：

import { interpolate, Spring, animated as a } from 'react-spring/renderprops';

然后使用导入的函数样式按钮：

style={{
  height: '100px',
  width: '100px',
  transform: interpolate(
    [props.scale],
    (s) => `scale(${s})`
  ),
}}