I have a class based component like this
class ArInput extends React.Component {
render() {
const { shadowless, success, error } = this.props;
const inputStyles = [
styles.input,
!shadowless && styles.shadow,
success && styles.success,
error && styles.error,
{...this.props.style}
];
return (
<Input
placeholder="write something here"
placeholderTextColor={argonTheme.COLORS.MUTED}
style={inputStyles}
color={argonTheme.COLORS.HEADER}
iconContent={
<Icon
size={14}
color={argonTheme.COLORS.ICON}
name="link"
family="AntDesign"
/>
}
{...this.props}
/>
);
}
}
I'm trying to convert above class to functional based component with react hooks.
This is the best I came up with in typescript
const ArInput =({ shadowless, success, error, style }:any)=> {
const inputStyles = [
styles.input,
!shadowless && styles.shadow,
success && styles.success,
error && styles.error,
{...style}
];
return (
<Input
placeholder="write something here"
placeholderTextColor={argonTheme.COLORS.MUTED}
style={inputStyles}
color={argonTheme.COLORS.HEADER}
iconContent={
<Icon
size={14}
color={argonTheme.COLORS.ICON}
name="link"
family="AntDesign"
/>
}
{ ...shadowless, ...success, ...error, ...style }
/>
);
}
but I'm getting an error on this line { ...shadowless, ...success, ...error, ...style }
The error is Expression expected.ts(1109)
In javascript code this the respectful line is {...this.props}
How can I convert my javascript class to typescript ?
And am I correct with the way I converted this line {...this.props.style}
in javascript code ?
question from:
https://stackoverflow.com/questions/65896257/converting-class-based-js-component-to-typescript-component-with-dynamic-props-d 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…