如何使用 typescript 在 React 功能組件中定義自定義道具？

Question

我剛剛用 typescript 開始了一個新的 React 項目，但我在功能組件中定義自定義道具時遇到了困難。

我查看了如何定義自定義道具，並找到了一種定義接口的方法，該接口詳細說明了我傳遞給 function 的道具類型，但是當我嘗試在我的主應用程序上運行它時，我收到一條錯誤消息

輸入'{數字：數字； }' 不可分配給類型 '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>
  )
}

在使用 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;