如何在打字稿中使用 antd.Form.create? [英] How to use antd.Form.create in typescript?

问题描述

我有一个由 Form.create() 创建的登录表单，但我无法从父组件向该表单传递任何道具，编译器总是通知类似

的错误

错误 TS2339:类型IntrinsicAttributes &"上不存在属性loading"IntrinsicClassAttributes>&只读<{孩子...'.

登录表单.tsx

import * as React from 'react';从'antd'导入{表单}；从 'antd/lib/form/Form' 导入 { WrappedFormUtils };界面道具{形式:WrappedFormUtils；加载:布尔值；用户名?:字符串；}class LoginForm 扩展了 React.Component{使成为() {const { 加载} = this.props;return (<div>form {loading ? 'true' : 'false'}</div>);}}导出默认 Form.create()(LoginForm);

登录页面.tsx

import LoginForm from './components/loginForm';const loginPage: React.SFC=(道具)=>{返回 (<div><LoginForm loading={true}/>^ 这里有错误！

);};

我的antd版本是2.11.2

<小时>

终于找到解决办法了

class LoginForm 扩展 React.Component{使成为() {const { 加载} = this.props;return (<div>form {loading ? 'true' : 'false'}</div>);}}导出默认 Form.create()(LoginForm);

解决方案

1. 导入 FormComponentProps

   import {FormComponentProps} from 'antd/lib/form/Form';

2. 然后拥有你的组件

   interface YourProps {测试:字符串；}类 YourComponent 扩展了 React.Component{构造函数(道具:YourProps & FormComponentProps){超级(道具)；...}}

3. 然后使用 Form.create() 导出类

   export default Form.create()(YourComponent);

   Form.create 上的通用参数将结果转换为带有 YourProps 的 React ComponentClass - 没有 FormComponentProps，因为它们是通过 Form.create 包装器组件注入的.

I have a login form created by Form.create(), but I can't pass any props to this form from parent component, compiler always notify a error like

error TS2339: Property 'loading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Compone
nt<{}, ComponentState>> & Readonly<{ childr...'.

LoginForm.tsx

import * as React from 'react';
import { Form } from 'antd';
import { WrappedFormUtils } from 'antd/lib/form/Form';

interface Props {
    form: WrappedFormUtils;
    loading: boolean;
    username?: string;
}

class LoginForm extends React.Component<Props, {}> {
    render() {
        const { loading } = this.props;
        return (<div>form {loading ? 'true' : 'false'}</div>);
     }
}

export default Form.create()(LoginForm);

LoginPage.tsx

import LoginForm from './components/loginForm';

const loginPage: React.SFC<Props> = (props) => {
     return (
         <div>
              <LoginForm loading={true}/>
                         ^ error here!
         </div>
     );
 };

My antd version is 2.11.2

---

Finally I found a solution

class LoginForm extends React.Component<Props & {form:     WrappedFormUtils}, State> {
  render() {
    const { loading } = this.props;
    return (<div>form {loading ? 'true' : 'false'}</div>);
  }
}

export default Form.create<Props>()(LoginForm);

解决方案

1. Import the FormComponentProps

   import {FormComponentProps} from 'antd/lib/form/Form';
   

2. Then have your component

   interface YourProps {
       test: string;
   }        
   
   class YourComponent extends React.Component<YourProps & FormComponentProps> {
       constructor(props: YourProps & FormComponentProps) {
           super(props);
           ...
       }
   }
   

3. Then export the class using Form.create()

   export default Form.create<YourProps>()(YourComponent);
   

   The generic argument on Form.create casts the result to a React ComponentClass with YourProps - without FormComponentProps, because these are being injected through the Form.create wrapper component.

这篇关于如何在打字稿中使用 antd.Form.create?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！