Машинопись с реактивной пружиной. Свойство «интерполировать» не существует для типа «число» - PullRequest
0 голосов
/ 13 марта 2019

Я использую реагирующую пружину с Typescript.Когда я использую собственный рендеринг с реагирующей пружиной, я получаю сообщение об ошибке для функции интерполяции.

«Свойство interpolate не существует для типа« номер »»

Я попытался представить интерфейс для внутренних подпорок компонента 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;

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

1 Ответ

1 голос
/ 15 мая 2019

Почему

При использовании версии рендеринга реквизит-реквизита интерполяция используется немного иначе, чем версия крючков. 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})`
  ),
}}
...