Redux 表单 Typescript 传递自定义道具 [英] Redux Form Typescript Pass Custom Props
问题描述
我正在尝试将自定义道具传递给我用 reduxForm
装饰的组件.另外我对打字稿很陌生.
I am trying to pass custom props to my component which is decorated with reduxForm
. Also I am very new in Typescript.
第一个问题是我不能用connect包装装饰的组件:
The first problem is that I can't wrap the decorated component with connect:
export default
connect(mapStateToProps)(
reduxForm({
form: 'myform'
})(MyComponent)
)
错误:
Error:(89, 5) TS2345:Argument of type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' is not assignable to parameter of type 'ComponentType<{ addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & DispatchPr...'.
Type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' is not assignable to type 'StatelessComponent<{ addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & Dispa...'.
Type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' provides no match for the signature '(props: { addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & DispatchProp<any> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
这显然是由错误的类型引起的,但正如我所说,我是 Typescript 的新手,我不确定如何处理这些长错误.目前我不需要将任何道具传递给 validate
表单函数,但这对未来的任务非常有帮助.
It's obviously caused by wrong types but as I said I am new in Typescript and I am not sure how to deal with these long errors. At this moment I don't need to pass any props to the validate
form function but it will be very helpful for future tasks.
主要问题是我无法将自定义道具传递给装饰组件:
The main problem is that I can't pass custom props to the decorated component:
export default reduxForm({
form: 'myform'
})(
connect(mapStateToProps)(MyComponent)
);
表单道具:
interface Props extends InjectedFormProps {
onSubmit: () => void;
// some values from the state
loading: boolean; // the custom prop
}
当我尝试这个时:
<MyForm loading onSubmit={this.handleSubmit} />
它抛出另一个错误:
Error:(134, 25) TS2339:Property 'loading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<any, Partial<ConfigProps<any, {}>>>> ...'.
奇怪的是,我能够传递在 InjectedFormProps
接口中声明的道具,但我无法传递任何自定义道具.实际上,我可以从 mapStateToProps
函数传递任何道具.也许我只是无法使用 reduxForm
将任何自定义道具传递给装饰组件.
The strange part is that I am able to pass props that are declared in the InjectedFormProps
interface but I can't pass any custom props. Actually, I am able to pass any props from the mapStateToProps
function. Maybe I just can't pass any custom props to the decorated component with reduxForm
.
推荐答案
@types/redux-form
7.0.10 和 redux-form
7.1.2 的工作解决方案:
Working solution for @types/redux-form
7.0.10 and redux-form
7.1.2:
在MyForm.tsx
中定义表单组件:
import * as React from "react";
import { InjectedFormProps, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
interface StateProps {
valueFromState: string;
}
interface Props extends StateProps {
loading: boolean; // the custom prop
}
const MyForm: React.StatelessComponent<Props & InjectedFormProps<{}, Props>> =
({handleSubmit, loading}) => (
<form onSubmit={handleSubmit}>
{loading && (<p>loading...</p>)}
</form>
)
const mapStateToProps = (state: any): StateProps => ({valueFromState: "1"});
export default connect(mapStateToProps)(
reduxForm<{}, Props>({
form: 'myform'
})(MyForm)
);
然后使用它:
import MyForm from './MyForm';
<MyForm onSubmit={() => console.log("submit")} loading />
这篇关于Redux 表单 Typescript 传递自定义道具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!