如何使用打字稿在反应功能组件中定义自定义道具？

Question

我刚刚用打字稿开始了一个新的反应项目，我在功能组件中定义自定义道具时遇到困难。

我查找了如何定义自定义道具，并找到了一种定义接口的方法，详细说明了我传递给函数的道具类型，但是当我尝试在我的主应用程序上运行它时，我收到一条错误消息

输入 '{ 数字：数字；}' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“digit”。TS2322

我的代码：

import React from 'react';
import Button from '@mui/material/Button';
export {}


interface NumberButton {
  digit:number,
}

function NumberButton(props:NumberButton){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import ClearButton from './Components';
import NumberButton from './Components';
export default function App(){

  return (
    <div>
      <ClearButton/>
      <NumberButton digit={1}/>
    </div>
  )
}

在使用钩子之后，我试图更加熟悉功能组件，并且我迷上了使用它们。

Answer 1

export {}

目前您没有导出 NumberButton 组件，因此这是需要修复的主要问题。此外，您对组件和道具使用相同的变量名称。尝试这个：

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

interface NumberButtonProps {
  digit: number,
}

function NumberButton(props: NumberButtonProps){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

export default NumberButton;