React PropTypes校验失效求助：Dot与CarouselItem组件类型未被正确校验

嘿，我来帮你排查这个问题～你遇到的是PropTypes 和 TypeScript 类型系统不互通的典型情况：PropTypes 是用来做运行时类型校验的，而 TypeScript 的隐式 any 提示是编译时的类型检查——你只写了 PropTypes，但没给组件的 props 定义 TypeScript 类型，所以 TS 没法识别这些约束，自然会把 activeDot 和 text 推断为 any。

解决思路：同时兼顾 PropTypes 和 TypeScript 类型定义 #

你需要给两个组件分别添加 TypeScript 的 props 类型接口，让 TS 能识别 props 的类型，同时保留 PropTypes 做运行时校验。

1. 给 Dot 组件添加 props 类型

定义一个 DotProps 接口，明确 activeDot 的类型，然后在组件参数里使用这个接口：

// 新增Dot组件的props类型
interface DotProps {
  activeDot: string;
}

const Dot = ({ activeDot }: DotProps) => {
  return (
    <div className={`dot w-1 h-1 bg-grayish transition-5 rounded ${activeDot}`}></div>
  );
}

Dot.propTypes = {
  activeDot: PropTypes.string.isRequired
}

2. 给 CarouselItem 组件添加 props 类型

直接复用你已经定义好的 ItemTextTypes，定义 CarouselItemProps 接口：

// 新增CarouselItem组件的props类型
interface CarouselItemProps {
  text: ItemTextTypes;
}

const CarouselItem = ({ text }: CarouselItemProps) => {
  return (
    <div className="carousel-item-1 flex flex-col">
      <span className="feature text-[38px] font-semibold ">{text.feature}</span>
      <span className="description text-[20px] text-grayish ">
        {text.description}
      </span>
    </div>
  );
};

CarouselItem.propTypes = {
  text: PropTypes.shape({
    feature: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired
  }).isRequired
}

3. 额外的小问题：你代码里的 className 语法错误

注意到你在 Dot 组件的 className 里多了一个闭合大括号：${activeDot}}，要改成 ${activeDot}，不然会导致样式错误哦～

完整修正后的代码片段 #

把上述修改整合后，你的代码应该是这样的：

import PropTypes from 'prop-types'
import { useState } from 'react'

interface ItemTextTypes {
  feature: string;
  description: string;
}

// 新增Dot组件props类型
interface DotProps {
  activeDot: string;
}

// 新增CarouselItem组件props类型
interface CarouselItemProps {
  text: ItemTextTypes;
}

const carouselText: ItemTextTypes[] = [
  {
    feature: '100% uptime 😎',
    description: 'Zero Infrastructure Management',
  },
  {
    feature: 'Effortless Scalability 🚀',
    description: 'Seamlessly handle high traffic loads',
  },
  {
    feature: 'Uninterrupted Performance ⚡️',
    description: 'Deliver exceptional user experiences, always',
  },
];

const Carousel = () => {
  const [activeItem, setActiveItem] = useState(0)

  return (
    <div className="carousel absolute top-[45%] left-5">
      <div className="carousel-items ">
        {carouselText.map((text, i) => <CarouselItem text={text} key={i} />)}
      </div>
      <div className="carousel-dots relative top-5 flex gap-2">
        {carouselText.map((_, i) => {
          const activeDot = activeItem === i ? 'active-dot' : ''
          return <Dot activeDot={activeDot} key={i} /> {/* 补了Dot组件的key，避免React警告 */}
        })}
      </div>
    </div>
  );
};

export default Carousel;

const Dot = ({ activeDot }: DotProps) => {
  return (
    <div className={`dot w-1 h-1 bg-grayish transition-5 rounded ${activeDot}`}></div>
  );
}

Dot.propTypes = {
  activeDot: PropTypes.string.isRequired
}

const CarouselItem = ({ text }: CarouselItemProps) => {
  return (
    <div className="carousel-item-1 flex flex-col">
      <span className="feature text-[38px] font-semibold ">{text.feature}</span>
      <span className="description text-[20px] text-grayish ">
        {text.description}
      </span>
    </div>
  );
};

CarouselItem.propTypes = {
  text: PropTypes.shape({
    feature: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired
  }).isRequired
}

补充说明 #

• 如果你觉得同时写 PropTypes 和 TypeScript 类型有点冗余，可以考虑使用 @types/prop-types 或者相关工具来自动生成，但对于小型项目来说，手动写两种约束也很清晰。
• 另外我还给你补了 Dot 组件的 key 属性，React 列表渲染里每个子项都需要唯一的 key，不然会触发控制台警告～

备注：内容来源于stack exchange，提问作者Sagar Mavai