我对 Typescript 相当陌生,并使用 Typescript 创建了一个 React 应用程序。我在将 Prop 从一个组件传递到另一个组件时遇到了一些麻烦。我在下面包含了一个示例,我的问题是关于组件的默认 Prop 。
当我在父组件中调用子组件时,出现错误:Type '{}' is missing the following properties from type 'IProps': className, disabled ts(2739)
我认为因为我的子组件上有默认 Prop ,所以当从其他组件调用该组件时,它们会填充任何缺失的 Prop 。
我知道我可以在界面中选择单个 Prop IProps
在我的子组件中使用 className?: string
但这不是我正在寻找的解决方案,因为它提出的问题多于解决的问题。
当我从另一个组件(如下所示)调用子组件时,我不想不必注意每个默认 Prop ,对于某些组件,我有很多 Prop :<Child class={''} disabled={false} />
我确信对此有一个相当简单的解决方案,但到目前为止我找不到任何方向。欢迎任何建议或方向。
// 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
最佳答案
解决了这个问题,对于看到这个答案的任何人:只需要按照下面的代码将默认 Prop 以及任何 Prop 传递到组件中:
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,
}
关于reactjs - typescript 和 react : Passing props between components vs default props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58093669/