如何在带有打字稿的反应功能组件中定义自定义道具？

Question

我刚刚使用 typescript 启动了一个新的 react 项目，但在功能组件中定义自定义 prop 时遇到了困难。

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

键入'{数字：数字； }' 不可分配给类型“IntrinsicAttributes”。 类型“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>
  )
}

在使用 hooks 之后，我正在尝试更熟悉功能组件，并且我已经迷上了使用它们。

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;