使用 TypeScript 3 扩展道具的 React 组件中的默认属性值

Question

我在 jsx 中使用对 defaultprops 的支持，如 https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#support-for-defaultprops-in-jsx 中所述

一切正常，除非我用另一个界面扩展道具。在这种情况下，我在子组件中扩展我的道具，例如

interface Props extends WithNamespaces { className: string; }

并声明默认道具：

const defaultProps = { className: '' };

*WithNamespaces 是 react-i18next 的一个接口

在我的父组件中，我得到了子组件缺少属性 className 的编译错误，即使它应该是可选的，对吗？

是否应该做一些不同的事情来保持这些默认道具不是强制性的？

Answer 1

Props 需要 className 属性。如果它是可选的，根据接口的使用方式，它应该在接口本身中标记为：

interface Props extends WithNamespaces {
  className?: string;
}

或者使用它的地方：

class Comp extends Component<Partial<Props>> {
  static defaultProps: Props = {
    className: ''
  }; 
  ...
}