React中FadeIn动画常量类型错误：如何解决ElementType赋值问题？

API 探路者

2026-8-25

问题解决方案

核心问题分析

你把CSS @keyframes 字符串直接赋值给了React.ElementType类型的变量，这是错误的——React.ElementType要求的是React组件（比如函数组件、类组件或者HTML标签名），而不是CSS代码字符串，所以TypeScript会抛出类型不匹配的错误。

正确实现方式

方式1：通过CSS类名应用动画

先在全局CSS文件或style标签中定义动画和类名：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

在React组件中给目标元素添加类名：

function Box() {
  return (
    <div className="fade-in">...</div>
  );
}

export default Box;

方式2：封装成React函数组件（推荐）
创建一个接收子元素的组件，内部渲染容器并应用动画样式：

import React from 'react';

// 定义组件属性类型，兼容div的所有原生属性
type FadeInProps = React.HTMLAttributes<HTMLDivElement>;

const FadeIn: React.FC<FadeInProps> = ({ children, ...props }) => {
  return (
    <div 
      style={{ animation: 'fadeIn 0.5s ease-in-out' }}
      {...props}
    >
      {children}
    </div>
  );
};

// 注意：需要在全局样式中提前定义@keyframes fadeIn
function Box() {
  return (
    <FadeIn>
      <div>...</div>
    </FadeIn>
  );
}

export default Box;

方式3：使用CSS-in-JS库（如styled-components）
如果项目使用CSS-in-JS方案，可以直接在组件中内联定义动画：

import styled from 'styled-components';

const FadeIn = styled.div`
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  animation: fadeIn 0.5s ease-in-out;
`;

function Box() {
  return (
    <FadeIn>
      <div>...</div>
    </FadeIn>
  );
}

export default Box;