在TypeScript React项目中如何为函数组件正确定义自定义props？

报错原因 #

你遇到的TS2322报错本质是因为导入的NumberButton不是你定义的合法React函数组件，TS将其识别为未知原生标签，因此只会校验内置的IntrinsicAttributes属性，找不到你定义的digit属性。

存在的两个核心问题 #

1. 组件未正确导出：你编写NumberButton的文件末尾只有export {}空导出，没有将定义的组件对外暴露，导入时拿到的是空对象，并非你写的组件。
2. 导入逻辑不匹配：你从同一个./Components路径同时导入ClearButton和NumberButton两个组件，需要使用命名导出/导入的写法，不能混用默认导出。

修正代码 #

./Components.tsx 文件

import React from 'react';
import Button from '@mui/material/Button';

// 建议Props接口和组件名区分命名，避免冲突
interface NumberButtonProps {
  digit: number;
}

// 命名导出NumberButton组件，添加React.FC类型标注获得更完善的类型支持
export const NumberButton: React.FC<NumberButtonProps> = (props) => {
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

// 同步用命名导出的方式暴露ClearButton组件
export const ClearButton = () => {
  // 此处补全你自己的ClearButton实现逻辑
  return <button>清空</button>
}

App组件文件

import React from 'react';
import ReactDOM from 'react-dom';
// 改为命名导入，从同一个文件引入两个组件
import { ClearButton, NumberButton } from './Components';

export default function App(){
  return (
    <div>
      <ClearButton/>
      <NumberButton digit={1}/>
    </div>
  )
}

可选优化建议 #

• 使用React.FC<Props类型>标注函数组件，可自动支持children等React组件内置属性的类型校验
• 单个文件导出多个组件时优先用命名导出，避免默认导出自定义命名导致的类型匹配错误

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