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

Posted 2023-03-13

【中文标题】将自定义道具传递给 TypeScript 中的 Redux 表单字段

【英文标题】：Pass custom props to Redux Form Field in TypeScript

【发布时间】：2018-02-17 01:49:25

【问题描述】：

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

任何传递给 Field 的自定义 props 都将被合并到与输入和元对象处于同一级别的 props 对象中。

但是将自定义 prop 传递给 Field 组件会引发编译错误：

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

类型 '(IntrinsicAttributes & IntrinsicClassAttributes> & ...

上不存在属性 'myProp'

在 props 属性中，我只能添加一组预定义的属性，例如占位符或类型。传递另一个 prop 会抛出这个错误：

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

键入'名称：“电子邮件”；组件：（道具：任何）=> 元素；道具： myProps：字符串； ; ' 不可分配给类型 '(IntrinsicAttributes & ...

是否可以将自定义 props 传递给 TypeScript 中的 Field 组件？

【问题讨论】：

你有 redux-form 和 react-redux-form 但它们实际上是两个不同的框架。你指的是哪一个？

我的错，我指的是redux-form。

【参考方案1】：

在我进行了更多试验后，我找到了传递自定义道具的解决方案：

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

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

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

【参考方案2】：

要将 custom props 传递给 Redux Form 的 Field 组件，您需要声明所有 props 的 interface 你想通过。

interface YourCustomProps 
    myProp1: string;
    myProp2: number;

现在，使用 Redux Form 中的 GenericField 将 Field 设置为 YourCustomField，您可以将 YourCustomProps 传递给它

import  Field, GenericField  from 'redux-form';

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

现在您可以将 custom props 传递给接口中声明的YourCustomField。

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

通过这种方式，您可以将任何东西作为 自定义道具 传递，例如反应组件！ :)

【参考方案3】：

我不是 Typescript 用户，所以我不确定类型定义是如何工作的，但我找到了 this thread about type definitions for Redux-form v6。最后，它们链接到this repository，它应该具有（如果我理解正确的话）更新的类型定义。

我想另一种方法是切换到 vanilla JS 来实现这个特定的功能。或者，也许可以定义一个函数来获取您的自定义道具，然后返回一个准备好获取 Redux 表单道具并合并它们的组件。

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

const inputWithCustomFields = (customFields) => ComponentToGetExtraFields => (props) => 
	const mergedProps = ...props, ...customFields;
	return (<ComponentToGetExtraFields ...mergedProps />);
;

const ComponentThatNeedsCustomStuff = (myCustomField1, myCustomField2, ...rest) => 
	console.log('doing stuff with the custom props',myCustomField1, myCustomField2);
	return (<div><h1>myCustomField1 + myCustomField2</h1><input ...rest /></div>);


const Parent = () => 
  const myCustomFields = 
     myCustomField1: "Hello, ", 
     myCustomField2: "world!", 
     value: 'can\'t change me',
     onChange: () =>  /* do nothing */ 
   ;
  const MergedComponent  = inputWithCustomFields(myCustomFields)(ComponentThatNeedsCustomStuff);
  return (<div>
      <MergedComponent />
    </div>);
;

ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

很公平。不能对剩余的链接做太多的事情（要复制的代码/文本太多等），但我已经为以前只是模糊地指向链接内容的一个部分添加了一个代码示例。