I have a React component written in TypeScript which applies the Material-UI style to react-select as shown below.
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);
How can I modify this so that it's exported as a parameterized type so can be used as
<MaterialReactSelect<string>
selectRef={this.selectRef}
onSelectionChange={this.onSelectionChange}
innerProps={innerProps}
/>
rather than
<MaterialReactSelect
selectRef={this.selectRef}
onSelectionChange={this.onSelectionChange}
innerProps={innerProps}
/>
This is unfortunately not an issue with material-ui specifically but higher-order components in general. When using a higher-order component your're losing all generic type information of the wrapped component.
You should be able to observe the same issues with connect
from react-redux
or styled
from styled-components
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.