Typescript和React：组件之间传递属性与默认属性

Question

我对TypeScript和使用TypeScript创建React应用还比较新。我在尝试将属性从一个组件传递到另一个组件时遇到了一些问题。以下是我提供的一个示例，我的问题与组件的默认属性有关。

当我在父组件中调用子组件时，我会收到一个错误：

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

我以为因为我在子组件中设置了默认属性，所以在从其他组件调用该组件时，缺少的属性会被默认属性填充。

我知道我可以使用className?: string在child组件中使单个属性变成可选的，但这不是我想要的解决方案，因为它引入了更多的问题。

我不想在调用子组件时注明每个默认属性，像下面这样，因为对于某些组件，我有很多属性：

<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

- paulosullivan22

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

- paulosullivan22

Answer 2

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

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

这实际上可以解决您遇到的可选属性问题，特别是如果您使用这些默认参数（即，懒惰的开发人员不检查所需/可选属性）。现在您可以将它们设置为可选...

- rrd

---

谢谢，我已经尝试过了，但不幸的是它并没有起作用。我认为问题出在当组件在父组件中实例化时，它看到了必需的 props，而没有检查默认的 props，无论是在参数中还是在 Child.defaultProps 中进一步下去。 - paulosullivan22

如果您修改接口使两个道具都是可选的，@paulosullivan22会发生什么？ - rrd

将接口中的道具设为可选项确实解决了错误，但我希望避免这种情况，因为在组件主体中使用道具时会出现很多问题。 - paulosullivan22

也许这可以帮助你：https://medium.com/@martin_hotell/react-typescript-and-defaultprops-dilemma-ca7f81c661c7 - sigmus

Answer 3

你做得对，但是忘记将className和disabled属性传递给子组件了。

const Parent: FC = () => { return (

) }

- Shrishail Uttagi

---

Stackoverflow不是聊天室。 - Alexey Nikonov