React TypeScript向子组件传递状态时遇TS类型错误求助

错误核心原因 #

你遇到的类型错误本质是Carousel组件的props类型定义和你传递的参数不匹配：

• 错误提示里的IntrinsicAttributes & Date说明，你的Carousel组件被定义为直接接收Date类型作为props（而非包含selectedDate属性的对象）。
• 但你传递的是键值对对象{ selectedDate: Date }，这就导致TypeScript判定类型不兼容。

直观示例说明 #

导致错误的Carousel组件定义

如果你的Carousel组件是这种写法，必然触发错误：

// 错误写法：直接把Date作为组件参数，不符合React组件规范
const Carousel = (date: Date) => {
  return <div>展示日期：{date.toLocaleDateString()}</div>;
};

React组件的第一个参数必须是props对象（哪怕是空对象），直接传基础类型会和React内置的IntrinsicAttributes（比如key、ref等）冲突，所以TypeScript会抛出类型不匹配的错误。

正确的Carousel组件定义

你需要把组件的props定义为对象类型，明确声明需要接收的属性：

// 正确写法：定义props接口，接收selectedDate属性
interface CarouselProps {
  selectedDate: Date;
}

const Carousel = ({ selectedDate }: CarouselProps) => {
  return <div>展示日期：{selectedDate.toLocaleDateString()}</div>;
};

这时你传递<Carousel selectedDate={selectedDate} />，TypeScript就会识别到props类型匹配。

关于你尝试加额外大括号的问题 #

如果你之前写成<Carousel {{ selectedDate }} />，这其实是传递了嵌套对象{ selectedDate: { selectedDate: Date } }，和组件期望的类型差距更大，所以还是会报错。

特殊场景：组件需直接接收Date值 #

如果你的Carousel组件要把Date作为children传递（比如直接渲染日期文本），可以这么写：

// 组件定义
const Carousel = ({ children }: { children: Date }) => {
  return <div>展示日期：{(children as Date).toLocaleDateString()}</div>;
};

// 使用方式
<Carousel>{selectedDate}</Carousel>

但这种场景很少见，更推荐用明确的props属性传递数据，可读性更强。

内容的提问来源于stack exchange，提问作者Freddy