타이프 라이터 오류 3.0 형태

Question

https://ant.design/components/form/

이에서 Form.create을하려고 할 때 내가 타이프 스크립트 오류를 ​​받고 있어요 오류입니다 형태 : 여기 타이프 스크립트 오류가

import { Form, Icon, Input, Button, Checkbox } from 'antd'; 
const FormItem = Form.Item; 

class NormalLoginForm extends React.Component { 
    handleSubmit = (e) => { 
    e.preventDefault(); 
    this.props.form.validateFields((err, values) => { 
     if (!err) { 
     console.log('Received values of form: ', values); 
     } 
    }); 
    } 
    render() { 
    const { getFieldDecorator } = this.props.form; 
    return (
     <Form onSubmit={this.handleSubmit} className="login-form"> 
     <FormItem> 
      {getFieldDecorator('userName', { 
      rules: [{ required: true, message: 'Please input your username!' }], 
      })(
      <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('password', { 
      rules: [{ required: true, message: 'Please input your Password!' }], 
      })(
      <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('remember', { 
      valuePropName: 'checked', 
      initialValue: true, 
      })(
      <Checkbox>Remember me</Checkbox> 
     )} 
      <a className="login-form-forgot" href="">Forgot password</a> 
      <Button type="primary" htmlType="submit" className="login-form-button"> 
      Log in 
      </Button> 
      Or <a href="">register now!</a> 
     </FormItem> 
     </Form> 
    ); 
    } 
} 

const WrappedNormalLoginForm = Form.create()(NormalLoginForm); 

ReactDOM.render(<WrappedNormalLoginForm />, mountNode); 

: Form.create()(NormalLoginForm)

Answer 1

당신은 가지고있는 문제에 대해 자세히 설명 할 수 있습니까?

Answer 2

Form.create는 FormComponentProps에 NormalLoginForm 구성 요소 소품을 캐스팅해야 할 정적 기능입니다. 이를 달성하기 위해 보조 인터페이스 NormalLoginProps을 만들고 'antd/lib/form/Form'의 FormComponentProps을 직접 가져올 수 있습니다.

import { Form, Icon, Input, Button, Checkbox } from 'antd'; 
import {FormComponentProps} from 'antd/lib/form/Form'; 
const FormItem = Form.Item; 
interface NormalLoginProps{} 

class NormalLoginForm extends React.Component<NormalLoginProps & FormComponentProps> { 
    handleSubmit = (e) => { 
    e.preventDefault(); 
    this.props.form.validateFields((err, values) => { 
     if (!err) { 
     console.log('Received values of form: ', values); 
     } 
    }); 
    } 
    render() { 
    const { getFieldDecorator } = this.props.form; 
    return (
     <Form onSubmit={this.handleSubmit} className="login-form"> 
     <FormItem> 
      {getFieldDecorator('userName', { 
      rules: [{ required: true, message: 'Please input your username!' }], 
      })(
      <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('password', { 
      rules: [{ required: true, message: 'Please input your Password!' }], 
      })(
      <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" /> 
     )} 
     </FormItem> 
     <FormItem> 
      {getFieldDecorator('remember', { 
      valuePropName: 'checked', 
      initialValue: true, 
      })(
      <Checkbox>Remember me</Checkbox> 
     )} 
      <a className="login-form-forgot" href="">Forgot password</a> 
      <Button type="primary" htmlType="submit" className="login-form-button"> 
      Log in 
      </Button> 
      Or <a href="">register now!</a> 
     </FormItem> 
     </Form> 
    ); 
    } 
} 

const WrappedNormalLoginForm = Form.create<NormalLoginProps>()(NormalLoginForm); 

ReactDOM.render(<WrappedNormalLoginForm />, mountNode);