Question

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

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

Type '{}' is missing the following properties from type 'IProps': className, disabled ts(2739)

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

我知道我可以使用IProps在子组件的界面className?: string中使各个道具成为可选对象，但这并不是我正在寻找的解决方案，因为它带来的问题多于解决的问题。

当我从另一个组件（如以下组件）中调用孩子时，我宁愿不必记下每个默认道具，对于某些组件，我有很多道具： <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

Answer 1

解决了这个问题，对于任何查看此答案的人：只需将默认的props以及以下代码中的所有props传递到组件中即可：

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,
}

Answer 2

您可以提供默认参数来阻止这种情况的发生：

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

这实际上应该可以解决您遇到的可选道具问题，尤其是当您使用这些默认参数时（即，懒惰的开发人员不会检查需要/可选的道具）。现在，您可以将它们设置为可选...

Answer 3

您做得对，但是错过了传递className并禁用了子组件的支持。

const父代：FC =（）=> { 返回（） }

Typescript和React：在组件之间传递道具与默认道具

3 个答案: