#reactjs #typescript #react-spring
#reactjs #typescript #react-spring
Вопрос:
Я использую react-spring с Typescript. Когда я использую собственный рендеринг с react-spring, я получаю сообщение об ошибке для функции interpolate.
«Свойство ‘interpolate’ не существует для типа ‘number'»
Я попытался ввести интерфейс для внутренних реквизитов компонента Spring, но не смог избавиться от различных сообщений об ошибках.
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;
Ответ №1:
Почему
При использовании версии react-spring для визуализации реквизитов интерполяция используется немного иначе, чем версия hooks. interpolate
не существует для scale
потому scale
, что это просто старое число, а не объект.
Исправление
Сначала вам нужно будет импортировать interpolate:
import { interpolate, Spring, animated as a } from 'react-spring/renderprops';
затем оформите кнопку с помощью импортированной функции:
style={{
height: '100px',
width: '100px',
transform: interpolate(
[props.scale],
(s) => `scale(${s})`
),
}}
Комментарии:
1. Интересно, что ошибка typescrpt исчезла в изолированной среде. Возможно, в следующей версии это было исправлено. Ваша версия также работает без ошибок, поэтому она также может быть ответом на мой вопрос. С тех пор я переключился на api-интерфейс hook.
2. Как бы вы написали это с помощью нескольких вызовов interpolate?