Reactjs 用react-spring键入脚本。类型“number”上不存在属性“interpolate”
我使用带有Typescript的react-spring。当我将本机渲染与react-spring一起使用时,会向插值函数发送一条错误消息 类型“number”上不存在属性“interpolate” 我试图为Spring组件内部道具引入一个接口,但我无法消除各种错误消息Reactjs 用react-spring键入脚本。类型“number”上不存在属性“interpolate”,reactjs,typescript,react-spring,Reactjs,Typescript,React Spring,我使用带有Typescript的react-spring。当我将本机渲染与react-spring一起使用时,会向插值函数发送一条错误消息 类型“number”上不存在属性“interpolate” 我试图为Spring组件内部道具引入一个接口,但我无法消除各种错误消息 import * as React from 'react'; import { FC, useState } from 'react'; import { Spring, animated as a } from 'react
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;
为什么
使用react spring的render props版本时,使用的插值与hooks版本略有不同。插值在比例上不存在,因为比例只是一个普通的旧数字,而不是一个对象
修复
您需要先导入插值:
import { interpolate, Spring, animated as a } from 'react-spring/renderprops';
然后使用导入的功能设置按钮的样式:
style={{
height: '100px',
width: '100px',
transform: interpolate(
[props.scale],
(s) => `scale(${s})`
),
}}
为什么
使用react spring的render props版本时,使用的插值与hooks版本略有不同。插值在比例上不存在,因为比例只是一个普通的旧数字,而不是一个对象
修复
您需要先导入插值:
import { interpolate, Spring, animated as a } from 'react-spring/renderprops';
然后使用导入的功能设置按钮的样式:
style={{
height: '100px',
width: '100px',
transform: interpolate(
[props.scale],
(s) => `scale(${s})`
),
}}
有趣的是,typescrpt错误在沙盒中消失了。也许在下一个版本中它得到了修复。你的版本也没有错误,所以它也可以回答我的问题。从那时起,我切换到了hook api。你会如何使用多个插值调用编写它呢?有趣的是,typescrpt错误在沙盒中消失了。也许在下一个版本中它得到了修复。你的版本也没有错误,所以它也可以回答我的问题。从那时起,我切换到了hook api。您将如何使用多个插值调用编写它?