Búsqueda de sitios web

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>> & ...

Artículos relacionados