reactjs - Typescript ile react-spring. 'interpolate' özelliği 'number' tipinde mevcut değil

React-spring'i Typescript ile kullanıyorum. React-spring ile yerel renderlemeyi kullandığımda interpolate fonksiyonunda bir hata mesajı alıyorum.

"'interpolate' özelliği 'number' türünde mevcut değil"

Spring bileşeninin iç özelliklerine bir arayüz kazandırmayı denedim, ama çeşitli hata mesajlarından kurtulamadım.

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

Cevap #1

Neden

React-spring'in render-props versiyonunu kullanırken, interpolate hooks versiyonundan biraz farklı kullanılır. interpolate, scale üzerinde mevcut değildir çünkü scale sadece basit bir sayı, bir nesne değil.

Düzeltme

Öncelikle interpolate'ı ithal etmeniz gerekecek:

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

sonra butonu içe aktarılan fonksiyonu kullanarak stil ver:

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