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

Posted 2023-03-13

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

【英文标题】：How to define custom props in a react functional component with typescript?

【发布时间】：2021-11-18 13:08:10

【问题描述】：

我刚刚使用 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 之后，我正在尝试更熟悉功能组件，并且我已经迷上了使用它们。

【参考方案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;

【讨论】：

谢谢，它成功了。如果我有多个要导出的组件在同一个文件中，我该如何做到这一点？ "export default " 只导出一个。

改用命名导出。例如，export function NumberButton(props: NumberButtonProps) /*etc*). 不要忘记将您的导入也更改为命名导入，如import NumberButton from 'insertFileNameHere'