Question

我有一个用TypeScript编写的React组件，该组件将Material-UI样式应用于react-select，如下所示。

const styles = (theme: Theme) => createStyles({
});

export interface Props<TI> extends WithStyles<typeof styles, true> {
    innerProps: Partial<AsyncSelectProps<TI>>;
    selectRef?: React.RefObject<StateManager<TI>>;
    onSelectionChange?: (selection: TI | undefined) => void;
}

class MaterialReactSelect<TI> extends React.PureComponent<Props<TI>> {
    ...
}

export default withStyles(styles, {withTheme: true})(MaterialReactSelect);

如何修改它，以便将其导出为参数化类型，以便用作

<MaterialReactSelect<string>
    selectRef={this.selectRef}
    onSelectionChange={this.onSelectionChange}
    innerProps={innerProps}
/>

而不是

<MaterialReactSelect
    selectRef={this.selectRef}
    onSelectionChange={this.onSelectionChange}
    innerProps={innerProps}
/>

Answer 1

不幸的是，这不是Material-ui的问题，而是总体上是高阶组件的问题。使用高阶组件时，您将丢失包装组件的所有通用类型信息。

对于connect的{{1}}或react-redux的{{1}}，您应该能够观察到相同的问题。

如何导出使用Material-UI和Styles的TypeScript React组件？

1 个答案: