如何使用typescript在react功能组件中定义自定义属性？

Question

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

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

类型“{ digit： number; }”不能分配给类型“IntrinsicAttributes”。属性“数字”在类型“内部属性”上不存在。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;