以适当的方式键入对象作为道具

目前我有以下组件

搜索按钮.tsx

export interface Props {
  // some other props
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export const SearchButton: React.SFC<Props> = ({
  // other props
  onClick,
})

Popover.tsx公司

interface ButtonComponentProps {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

interface Props {
  buttonComponent: React.ComponentType<ButtonComponentProps>;
}

class FilterPopover extends React.Component<Props, State> {
    render() {
        const {buttonComponent: BtnComponent} = this.props;
        return (
            <div>
                //...
                <BtnComponent onClick={this.open} />
            </div>
        )
    }

}

<Popover buttonComponent={SearchButton}/>

但我有一个不匹配的类型:

The expected type comes from property 'buttonComponent' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Popover> & Readonly<{ children?: ReactNode; }> & Readonly<Props>'

所以如果我把道具从 Popover.tsx

interface ButtonComponentProps {
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

然后接口匹配,但Typescript是如何通过 SearchButton ? 这样匹配接口可以吗?为什么那些应该是一样的?

React 16.4.1类型脚本3.0.1