Reactjs 打字稿&；反应：在组件之间传递道具与默认道具

我对Typescript和使用Typescript创建React应用程序相当陌生。我在将道具从一个组件传递到另一个组件时遇到了一些问题。我在下面举了一个例子，我的问题是关于组件的默认道具

在父组件中调用子组件时，出现错误：

类型“{}”缺少类型“IProps”中的以下属性：className，禁用的ts（2739）

我认为，因为我的子组件上有默认的道具，所以当从其他组件调用该组件时，它们会填补任何缺少的道具

我知道我可以使用

className？：string在子组件的接口
IProps
中选择单个道具，但这不是我要寻找的解决方案，因为它带来的问题比解决的问题多

当我从另一个组件调用子组件时，我不想记下每个默认的道具，如下面所示。对于一些组件，我有很多道具：

我相信有一个相当简单的解决方案，但我还没有找到任何方向。欢迎提供任何建议或指导

// Parent component: 

import React, { FC } from 'react'

import Child from './child'

const Parent: FC = () => {
    return (
        <Child />
    )
}

export default Parent


// Child component: 

import React, { FC } from 'react'

interface IProps {
  className: string
  disabled: boolean
}

const Child: FC<IProps> = ({ className, disabled }: IProps) => {
  return (
    <button className={className} disabled={disabled}>
      Click here
    </button>
  )
}

Child.defaultProps = {
  className: '',
  disabled: false,
}

export default Child

//父组件：
从“React”导入React，{FC}
从“./Child”导入子项
常量父项：FC=（）=>{
返回(
)
}
导出默认父级
//子组件：
从“React”导入React，{FC}
接口IProps{
类名：string
禁用：布尔值
}
常量子项：FC=（{className，disabled}:IProps）=>{
返回(
点击这里
)
}
Child.defaultProps={
类名：“”，
残疾人士:错,，
}
导出默认子对象
您可以提供默认参数来阻止这种情况发生：

const Child: FC<IProps> = ({ className = 'foo', disabled = false }: IProps) => {
  ...
}

const-Child:FC=（{className='foo'，disabled=false}:IProps）=>{
...
}

这实际上可以解决您的可选道具问题，特别是如果您使用这些默认参数（即，懒惰的开发人员没有检查哪些道具是必需的/可选的）。现在，您可以将它们设置为可选…
解决了这个问题，任何人都可以看到这个答案：只需将默认道具以及任何道具传递到组件中，如下代码所示：

import React, { FC } from 'react'

interface IProps {
  className: string
  disabled: boolean
}

const Child: FC<IProps & Child.defaultProps> = ({ className, disabled }: IProps) => {
  return (
    <button className={className} disabled={disabled}>
      Click here
    </button>
  )
}

Child.defaultProps = {
  className: '',
  disabled: false,
}

import React，{FC}来自“React”
接口IProps{
类名：string
禁用：布尔值
}
常量子项：FC=（{className，disabled}:IProps）=>{
返回(
点击这里
)
}
Child.defaultProps={
类名：“”，
残疾人士:错,，
}
您做得不错，但没有将className和禁用的道具传递给子组件

常量父项：FC=（）=>{
返回(
)
}
谢谢，我已经试过了，但不幸的是没有用。我认为问题是当组件在父组件中实例化时，它会看到这些道具是必需的，并且不会在参数中或在
子项中进一步检查默认道具。如果您修改接口使两个道具都可选，那么会发生@Paulosellivan22吗？在接口中使道具可选确实会解决错误，但我希望避免这种情况，因为它会带来很多问题当使用组件主体中的道具时，可能会出现一些问题。这可能会有所帮助：Stackoverflow不是聊天