javascript - 对于具有自己的 props 的连接组件的 TypeScript 警告

Question

我有两个组件(聪明的和愚蠢的)如下:

// Container component file...

interface OwnProps {
  id: Id;
}

function mapStateToProps(state: State, ownProps: OwnProps) {
    return { isActive: ... };
}

export const Container: any = connect(mapStateToProps, null)(DumbComponent);

// Dumb component file...

interface DumbComponentProperties {
    isActive: boolean;
}

export class DumbComponent extends React.Component<DumbComponentProperties, {}> {
    ...
}

我在 connect 内的 DumbComponent 下收到一条红色波浪线警告，即:

Argument of type 'typeof DumbComponent' is not assignable to parameter of type 'Component OwnProps & { isActive: boolean; }'....>

如果我通过 id? 将 id 设置为可选，则可以修复错误。看起来 TypeScript 认为 DumbComponent 也需要 OwnProps 类型，因为 id 正在作为 prop 传递给它？我不明白为什么会出现这种情况，难道不是只有属性 isActive 被传递给 DumbComponent 吗？

Answer 1

我没有发现您的代码有任何问题，但输入函数 mapStateToProps 函数是一个很好的做法，例如，

function mapStateToProps(state: State, ownProps: OwnProps): DumbComponentProperties { 返回 { isActive: ... }; }