react-spring 与 typescript 的反应错误

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 | 类型的参数不明确的;来自？：TransitionFrom； loop?: LoopProp> |不明确的; ... 22 更多 ...; onDestroyed?: ((item: ToastMessage, key: Key) => void) |不明确的; } | （目的 ＆ {}）'。 Overload 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