reactjs - React - TypeScript - Ant Design Form - No se pueden pasar props a los componentes envueltos
Tengo un componente que envuelve un formulario de Ant Design de la siguiente manera:
export interface IMyProps {
onSubmit: () => void,
anInput: React.ReactNode
}
export class MyForm extends React.Component<IMyProps> {
constructor(props: any) {
super(props)
}
render() {
return (
<Form onSubmit={this.props.onSubmit}>
{this.props.anInput}
</Form>
)
}
}
Quería poder pasar cualquier ReactNode a la estructura de mi formulario y una función para manejar el envío del formulario.
Así que también tengo este componente que define el componente pasado a MyForm:
export interface IDecoratorProps extends FormComponentProps {
onSubmit: () => void,
value: string
}
class MyDecoratedForm extends React.Component<IDecoratorProps> {
constructor(props: any) {
super(props)
}
render() {
return (
<div>
<MyForm
onSubmit={this.props.onSubmit}
anInput={
<Form.Item
label={"label"}
hasFeedback>
{
this.props.form.getFieldDecorator(
"label",
{
rules: [{required: true, message: 'This is required'}]
}
)
(
< Input size="large" type="text" value={this.props.value}/>
)
}
</Form.Item>
}/>
</div>
)
}
}
export const MyFormDecorator = Form.create<IDecoratorProps>()(MyDecoratedForm);
Y finalmente tengo el componente Page que se supone que debe pasar las props value y las props onSubmit.
Algo así:
...
render() {
<MyFormDecorator value={this.state.value} onSubmit={() => {}}/>
}
Mi problema es que tengo un
TS2339: La propiedad 'value' no existe en el tipo 'IntrinsicAttributes & IntrinsicClassAttributes, ComponentState>> & ...