如何在带有 Field 和 FieldArray 的 React 组件中使用由 @types/redux-form 定义的类型?

本文介绍了如何在带有 Field 和 FieldArray 的 React 组件中使用由 @types/redux-form 定义的类型?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 React、Redux、Redux-Form 和 TypeScript 开发应用程序.我正在努力使用包 @types/redux-form (DefinitelyTyped) 定义的类型，尤其是 FieldArray.有一个属性组件"，我在其中传递了对组件的引用，但我不知道在描述它的道具时应该使用什么类型.我从 Redux-Form 存储库下载了使用 FieldArray 的示例，并稍微修改了它以使用 TypeScript.我想用 compilerOption "noImplicitAny": true 编译它.所以这里是 FieldArraysForm.tsx(类似于官方示例):

import * as React from 'react';import { Field, FieldArray, reduxForm } from 'redux-form';从'./validate'导入验证；const renderField = (props) =>{const { touch, error } = props.meta;const { 输入，标签，类型 } = 道具；返回 (<div><label>{label}</label><div><input {...input} type={type} placeholder={label}/>{感动&&错误&&<span>{错误}</span>}

import * as React from 'react'; import { Field, FieldArray, reduxForm } from 'redux-form'; import validate from './validate'; const renderField = (props) => { const { touched, error } = props.meta; const { input, label, type } = props; return ( <div> <label>{label}</label> <div> <input {...input} type={type} placeholder={label} /> {touched && error && <span>{error}</span>} </div> </div> ) } const renderHobbies = (props) => { const { fields } = props; const { error } = props.meta; return ( <ul> <li> <button type="button" onClick={() => fields.push()}> Add Hobby </button> </li> {fields.map((hobby, index) => ( <li key={index}> <button type="button" title="Remove Hobby" onClick={() => fields.remove(index)} /> <Field name={hobby} type="text" component={renderField} label={`Hobby #${index + 1}`} /> </li> ))} {error && <li className="error">{error}</li>} </ul> ) } const renderMembers = (props) => { const { fields } = props; const { error, submitFailed } = props.meta; return ( <ul> <li> <button type="button" onClick={() => fields.push({})}> Add Member </button> {submitFailed && error && <span>{error}</span>} </li> {fields.map((member, index) => ( <li key={index}> <button type="button" title="Remove Member" onClick={() => fields.remove(index)} /> <h4>Member #{index + 1}</h4> <Field name={`${member}.firstName`} type="text" component={renderField} label="First Name" /> <Field name={`${member}.lastName`} type="text" component={renderField} label="Last Name" /> <FieldArray name={`${member}.hobbies`} component={renderHobbies} /> </li> ))} </ul> ) } const FieldArraysForm = props => { const { handleSubmit, pristine, reset, submitting } = props return ( <form onSubmit={handleSubmit}> <Field name="clubName" type="text" component={renderField} label="Club Name" /> <FieldArray name="members" component={renderMembers} /> <div> <button type="submit" disabled={submitting}> Submit </button> <button type="button" disabled={pristine || submitting} onClick={reset}> Clear Values </button> </div> </form> ) } export default reduxForm({ form: 'fieldArrays', // a unique identifier for this form validate })(FieldArraysForm)

import * as React from 'react'; import { Field, FieldArray, reduxForm, WrappedFieldProps, WrappedFieldArrayProps, InjectedFormProps, GenericFieldArray } from 'redux-form'; import validate from './validate'; interface CustomFieldProps { type?: string; } const FieldArrayCustom = FieldArray as new () => GenericFieldArray<Field, any>; const renderField = (props: WrappedFieldProps & CustomFieldProps) => { const { touched, error } = props.meta; const { input, label, type } = props; return ( <div> <label>{label}</label> <div> <input {...input} type={type} placeholder={label} /> {touched && error && <span>{error}</span>} </div> </div> ) } const renderHobbies = (props: WrappedFieldArrayProps<undefined>) => { const { fields } = props; const { error } = props.meta; return ( <ul> <li> <button type="button" onClick={() => fields.push(undefined)}> Add Hobby </button> </li> {fields.map((hobby, index) => ( <li key={index}> <button type="button" title="Remove Hobby" onClick={() => fields.remove(index)} /> <Field name={hobby} type="text" component={renderField} label={`Hobby #${index + 1}`} /> </li> ))} {error && <li className="error">{error}</li>} </ul> ) } const renderMembers = (props: WrappedFieldArrayProps<{}>) => { const { fields } = props; const { error, submitFailed } = props.meta; return ( <ul> <li> <button type="button" onClick={() => fields.push({})}> Add Member </button> {submitFailed && error && <span>{error}</span>} </li> {fields.map((member, index) => ( <li key={index}> <button type="button" title="Remove Member" onClick={() => fields.remove(index)} /> <h4>Member #{index + 1}</h4> <Field name={`${member}.firstName`} type="text" component={renderField} label="First Name" /> <Field name={`${member}.lastName`} type="text" component={renderField} label="Last Name" /> <FieldArrayCustom name={`${member}.hobbies`} component={renderHobbies} /> </li> ))} </ul> ) } const FieldArraysForm = (props: InjectedFormProps) => { const { handleSubmit, pristine, reset, submitting } = props return ( <form onSubmit={handleSubmit}> <Field name="clubName" type="text" component={renderField} label="Club Name" /> <FieldArrayCustom name="members" component={renderMembers} /> <div> <button type="submit" disabled={submitting}> Submit </button> <button type="button" disabled={pristine || submitting} onClick={reset}> Clear Values </button> </div> </form> ) } export default reduxForm({ form: 'fieldArrays', // a unique identifier for this form validate })(FieldArraysForm)