如何在Typescript中设置react-resize-detector的HOC？

Question

我想设置我的组件以使用react-resize-detector的withResizeDetector包装器，但是我找不到如何使用它的示例。

Answer 1

查看index.d.ts文件后，我发现没有扩展道具的导出文件，因此我不得不手动创建它们。

这对我有用：

type Props = 
    IProps & {
        height: number;
        width: number;
    };

IProps是您的现有道具的组成部分。

我使用了功能组件，所以声明是：

const EventSnapshotPane: React.FC<Props> = ({
    ... other props from IProps
    width,
    height,
}) => {

最后，导出

export default withResizeDetector(EventSnapshotPane);

我实际上使用redux和Google MUI，所以我的导出要复杂一些，但是这里适用于使用这两种方法的其他人

export default withStyles(styles)(connect(
    mapStateToProps,
    {},
)(withResizeDetector(EventSnapshotPane)));