Reactjs 将自定义道具传递给TypeScript中的Redux表单字段

我想将自定义属性传递到我的Redux表单字段。文件中说：

传递给字段的任何自定义道具都将与输入和元对象合并到同一级别的道具对象中

但将自定义道具传递给字段组件将引发编译错误：

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

类型“”上不存在属性“myProp”。（IntrinsicatAttributes&IntrinsicClassAttributes>&

在props属性中，我只能添加一组预定义的属性，如占位符或类型。传递另一个prop将引发以下错误：

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

类型“{name:“E-Mail”；组件：（props:any）=>Element；props:{myProps:string；}；}”不可分配给类型“（intrinsifictattributes&

---

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

我不是TypeScript用户，因此我不确定类型定义是如何工作的，但我找到了。最后，它们链接到应该有（如果我理解正确）更新的类型定义的字段组件

我想另一种选择是切换到vanilla JS来实现这个特定的功能。或者可以定义一个函数，它接受你的自定义道具，然后返回一个组件，准备接受Redux表单道具并合并它们

编辑：我试图在下面包含的代码中说明最后一个建议的基本思想，即所谓的HOC（高阶组件）

constinputwithcustomfields=（customFields）=>ComponentToGetExtraFields=>（props）=>{
const mergedProps={…props，…customFields}；
返回（）；
};
const componentthaneedscustomstuff=（{myCustomField1，myCustomField2，…rest}）=>{
log（'使用自定义道具做事情'，myCustomField1，myCustomField2）；
返回（{myCustomField1+myCustomField2}）；
}
常量父项=（）=>{
常量myCustomFields={
myCustomField1：“你好，”，
myCustomField2：“世界！”，
值：“无法更改我”，
onChange:（）=>{/*什么都不做*/}
};
const MergedComponent=inputWithCustomFields（myCustomFields）（需要CSTOMSTUFF的组件）；
返回(
);
};
ReactDOM.render（，document.getElementById（'root'）；

---

在我这方面进行了更多的实验之后，我找到了一个通过定制道具的解决方案：

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

在myComponent中，您的自定义道具位于属性的根级别：

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

const myComponent=（道具）=>{
返回{props.myCustomProp1+“”props.myCustomProp2}
}

要将自定义道具传递到Redux表单的

字段

组件，您需要声明一个界面，该界面包含所有要传递的道具

interface YourCustomProps {
    myProp1: string;
    myProp2: number;
}

现在，使用

GenericField

fromRedux Form将

Field

设置为

YourCustomField

，您可以将

YourCustomProps

import { Field, GenericField } from 'redux-form';

const YourCustomField = Field as new () => GenericField<YourCustomProps>;

---

通过这种方式，您可以将任何内容传递为自定义道具，例如react组件！：）

你有

redux-form

和

react-redux-form

但这实际上是两个不同的框架。你指的是哪一个？我的错，我指的是redux-form。虽然这个链接可以回答问题，但最好在这里包含答案的基本部分，并提供链接供参考。只有链接才能回答问题n如果链接页面发生更改，则无效。-很公平。无法对剩余链接做太多处理（太多代码/文本无法复制等），但我为一部分添加了一个代码示例，该部分以前只是模糊地指向链接的内容。

<YourCustomField
    myProp1="Hi"
    myProp2={123}
    component={MaterialTextField}
/>