@typesreact-transition-group：通用类型“ReactElementP, T”需要 1 到 2 个类型参数。ts(2707)

typescript

1个回答

写回答

咸鱼欣欣子

2025-06-23 18:00

+ 关注

CSS
CSS

React Transition Group（React 过渡组件）的通用类型错误

React Transition Group 是一个用于处理 React 组件过渡动画的库。它提供了一些组件和工具，可帮助我们在组件的进入和离开过程中实现平滑的动画效果。然而，当我们在使用 @types/react-transition-group 类型声明库时，可能会遇到一个错误，即“通用类型‘ReactElement’需要 1 到 2 个类型参数”。

这个错误的出现是因为在我们使用 React Transition Group 时，需要正确地指定组件的类型参数。下面是一个案例代码来展示这个错误的产生：

tsx
import React from 'react';
import { Transition } from 'react-transition-group';
const ExampleComponent: React.FC = () => {
  const [show, setShow] = React.useState(false);
  const handleButtonClick = () => {
    setShow(!show);
  };
  return (
    <div>
      <button onClick={handleButtonClick}>Toggle</button>
      <Transition in={show} timeout={300}>
        {state => (
          <div className={<code>box ${state}</code>}>
            {state === 'entered' ? 'Entered' : 'Exited'}
          </div>
        )}
      </Transition>
    </div>
  );
};
export default ExampleComponent;

在上述的代码中，我们使用了 Transition 组件来实现一个简单的过渡效果。当点击按钮时，组件的状态会切换，并根据状态的不同，展示不同的 CSS 类名和文字。

然而，当我们尝试编译上述代码时，就会遇到之前提到的错误：“通用类型‘ReactElement’需要 1 到 2 个类型参数”。这是因为我们没有正确地指定 Transition 组件的类型参数。

解决通用类型错误

为了解决这个通用类型错误，我们需要为 Transition 组件提供正确的类型参数。具体来说，我们需要为 Transition 组件传递一个 ReactElement 类型参数，该类型参数应包含两个类型参数，分别是组件的 props 类型和组件返回的元素类型。

在我们的例子中，Transition 组件的 props 类型是空对象类型 {}，而返回的元素类型是一个可选的字符串类型。因此，我们可以将类型参数 <{}, string> 传递给 Transition 组件，以解决这个类型错误。

下面是修改后的代码：

tsx
import React from 'react';
import { Transition, TransitionStatus } from 'react-transition-group';
const ExampleComponent: React.FC = () => {
  const [show, setShow] = React.useState(false);
  const handleButtonClick = () => {
    setShow(!show);
  };
  return (
    <div>
      <button onClick={handleButtonClick}>Toggle</button>
      <Transition<{}, string> in={show} timeout={300}>
        {(state: TransitionStatus) => (
          <div className={<code>box ${state}</code>}>
            {state === 'entered' ? 'Entered' : 'Exited'}
          </div>
        )}
      </Transition>
    </div>
  );
};
export default ExampleComponent;

在修改后的代码中，我们将 <{}, string> 作为类型参数传递给 Transition 组件，并在组件的回调函数中显式地指定 state 参数的类型为 TransitionStatus。

在使用 React Transition Group 库时，我们需要正确地指定组件的类型参数，以避免出现“通用类型‘ReactElement’需要 1 到 2 个类型参数”的错误。通过为 Transition 组件传递正确的类型参数，我们可以解决这个类型错误，并顺利地使用这个库实现组件过渡动画效果。

举报有用（4）分享收藏

@typesreact-transition-group：通用类型“ReactElementP, T”需要 1 到 2 个类型参数。ts(2707)

1个回答

咸鱼欣欣子

热门话题

相关问题