react-spring 与 typescript for react 的错误

Question

我正在尝试使用 react-spring 制作动画，但是当我调用 useTransition 函数传递某种错误的属性时我不理解

import React from 'react';
import { useTransition } from 'react-spring';
import { Container } from './styles';
import { ToastMessage } from '../../hooks/toast';
import Toast from './Toast/index';

interface ToastContainerProps {
  messages: ToastMessage[];
}

const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
  const messageWithTransitions = useTransition(
    messages,
    message => message.id,
    {
      from: { right: '-120%' },
      enter: { right: '0%' },
      leave: { right: '-120%' },
    },
  );
  return (
    <Container>
      {messageWithTransitions.map(({ item, key, props }) => (
        <Toast key={key} message={item} />
      ))}
    </Container>
  );
};

export default ToastContainer;

错误：

没有与此调用匹配的重载。重载 1 of 3, '(data: OneOrMore, props: () => { ref?: SpringRef | undefined; from?: TransitionFrom; ... 23 more ...; onDestroyed?: ((item: ToastMessage , key: Key) => void) | undefined; } | (object & {}), deps?: any[] | undefined): [...]', 给出了以下错误。 '(message: any) => any' 类型的参数不可分配给 '() => { ref?: SpringRef |不明确的;来自？：过渡自；循环？：LoopProp> |不明确的; ... 还有 22 个 ...； onDestroyed?: ((item: ToastMessage, key: Key) => void) |不明确的; } | （目的＆ {}）'。重载 2 of 3, '(data: OneOrMore, props: { ref?: SpringRef | undefined; from?: TransitionFrom; ... 23 more ...; onDestroyed?: ((item: ToastMessage, key: Key ) => void) | undefined; } | (object & {}), deps: any[] | undefined): [...]'，出现以下错误。 '{ 类型的参数 from: { right: string; };输入：{ 右：字符串； };离开：{ 右：字符串； }; }' 不可分配给 'any[]' 类型的参数。对象字面量只能指定已知属性，并且 'from' 不存在于类型 'any[]' 中。 TS2769

 const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
const messageWithTransitions = useTransition(
                                   ^
     messages,
    message => message.id,

Answer 1

我遇到了同样的问题，因为我也在训练营。我不知道你是否已经解决了这个问题，但我会把解决方案贴在这里：

import React from 'react';
import { useTransition } from 'react-spring';

import Toast from './Toast';

import { ToastMessage } from '../../hooks/toast';
import { Container } from './styles';

interface ToastContainerProps {
  messages: ToastMessage[];
}

const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
  const messagesWithTransitions = useTransition(messages, {
    keys: (message) => message.id,
    from: { right: '-120%' },
    enter: { right: '0%' },
    leave: { right: '-120%' },
  });

  return (
    <Container>
      {messagesWithTransitions((style, item, t) => (
        <Toast key={t.key} style={style} message={item} />
      ))}
    </Container>
  );
};

export default ToastContainer;

如果需要，您可以在此处阅读 useTransition 挂钩中的更改：Breaking Changes

react-spring 与 typescript for react 的错误

Error in react-spring with typescript for react

typescript

reactjs

styled-components

react-spring