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

Question

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

Any custom props passed to Field will be merged into the props object on the same level as the input and meta objects.

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

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

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

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

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

键入'{名称："E-Mail"；组件：（道具：任何）=>元素；道具：{ myProps：字符串； }; }' 不可分配给类型 '(IntrinsicAttributes & ...

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

Answer 1

我不是 Typescript 用户，所以我不确定类型定义是如何工作的，但我发现 this thread about type definitions for Redux-form v6. In the end they link to this repository 应该有（如果我理解正确的话）更新的类型定义。

我想另一种方法是切换到 vanilla JS 来实现这个特定的功能。或者也许可以定义一个函数，它接受您的自定义道具，然后 returns 一个准备好接受 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>

Answer 2

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

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

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

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

Answer 3

要将 自定义道具 传递给 Redux Form 的 Field 组件，您需要声明一个 您要传递的所有 props 的接口。

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>;

现在您可以将 自定义道具 传递给 YourCustomField，如界面中声明的那样。

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

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

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

Pass custom props to Redux Form Field in TypeScript

typescript

reactjs

redux-form

react-redux