如何在打字稿中使用antd.Form.create? [英] How to use antd.Form.create in typescript?
问题描述
我有一个由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>
);
};
我的antd版本是2.11.2
My antd version is 2.11.2
最后我找到了解决方法
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);
推荐答案
-
导入FormComponentProps
Import the FormComponentProps
import {FormComponentProps} from 'antd/lib/form/Form';
然后有了您的组件
Then have your component
interface YourProps {
test: string;
}
class YourComponent extends React.Component<YourProps & FormComponentProps> {
constructor(props: YourProps & FormComponentProps) {
super(props);
...
}
}
然后使用Form.create()导出类
Then export the class using Form.create()
export default Form.create<YourProps>()(YourComponent);
Form.create上的通用参数将结果强制转换为带有YourProps的React ComponentClass-不带FormComponentProps,因为这些是通过Form.create包装器组件注入的.
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屋!