将自定义道具传递给TypeScript中的Redux Form Field

Question

我想将自定义属性传递给我的Redux-Form-Field.在文档中它说:

传递给Field的任何自定义道具都将合并到与输入和元对象相同级别的props对象中.

但是将自定义道具传递给Field组件会引发编译错误:

<Field
    name="E-Mail"
    component={MaterialTextField}
    myProp="Test"
/>

属性'myProp'在类型'上不存在(IntrinsicAttributes&IntrinsicClassAttributes>&...

在props属性中,我只能添加一组预定义的属性,如占位符或类型.传递另一个道具会抛出此错误:

<Field
    name="E-Mail"
    component={MaterialTextField}
    props = {{
        myProps: 'Test'
    }}
/>

输入'{name:"E-Mail"; 组件:(props:any)=>元素; 道具:{myProps:string; }; }'不能赋值给''(IntrinsicAttributes&...

是否有可能将自定义道具传递给TypeScript中的Field组件？

Answer 1

经过一些实验,我找到了传递自定义道具的解决方案:

<Field 
    name="myName"
    props={{
        type: 'text'
    }}
    component={myComponent}
    {...{
        myCustomProps1: 'myCustomProp1',
        myCustomProps2: 'myCustomProp2'
    }}
/>

在myComponent中,您可以在属性的根级别拥有自定义道具:

const myComponent = (props) => {
    return <div>{props.myCustomProp1 + " " props.myCustomProp2}</div>
}