如何以 redux 形式传入动态表单名称？答案

【问题标题】：How do you pass in a dynamic form name in redux form?如何以 redux 形式传入动态表单名称？
【发布时间】：2017-03-23 10:15:53
【问题描述】：

我正在尝试使用此代码将动态表单名称传递给 reduxForm。

这是我找到的代码：

let FormAddress = compose(connect((state, props) => ({form: props.form})), reduxForm({destroyOnUnmount: false, asyncBlurFields: []}))(ValidationForm);

从这篇文章： https://github.com/erikras/redux-form/issues/603#issuecomment-254271319

但我不确定发生了什么。

这就是我目前的做法：

const formName = 'shippingAddress';
const form = reduxForm({
  form: formName
});

export default connect(mapStateToProps)(CityStateZip);

但我希望能够使用道具传递它，如下所示：

const formName = 'shippingAddress';
const form = reduxForm({
  form: props.form
  // validate
});

export default connect(mapStateToProps)(CityStateZip);

但是当我尝试这样做时，它抱怨说它不知道 props 是什么——因为我认为它超出了上述函数的范围。

有人可以帮我吗？

【问题讨论】：

个人建议 - 但我在 not 使用 redux 表单时取得了更大的成功。它的功能很棒，但是当您开始需要将应用程序的复杂性添加到它时，它变得难以使用。我知道人们在这方面取得了巨大的成功，但是如果你不依赖于 redux 形式，那么像你在这里遇到的问题需要 2 秒的时间......
只是想知道我的回答是否对你有用

标签： javascript reactjs redux redux-form

【解决方案1】：

调用FormAddress组件的父组件应该将props中的表单名称发送为props.form:

var formId="SomeId"
<FormAddress form={formId} />

// and in your FormAddress component have 
const form = reduxForm({
  //no need to put form again here as we are sending form props.
});

这对我有用。

【讨论】：

我喜欢这个，因为在我的用例中，名称确实是父渲染它的一个问题。现在我的表单可以更通用，不需要派生它的名字。
又好又简单

【解决方案2】：

那个 sn-p 基本上使用来自redux 库的compose 函数。这里有一些你可以尝试...

<FormAddress name="shippingAddress" />

所以在你的components/FormAddress.js 文件中

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

class FormAddress extends React.Component { ... }

const mapStateToProps = (state, ownProps) => {
    return {
        form: ownProps.name,
        // other props...
    }
}

export default compose(
    connect(mapStateToProps),
    reduxForm({
        //other redux-form options...
    })
)(FormAddress);

希望这会有所帮助！

【讨论】：

赞成这是一个更完整的答案，因为 ownProps 作为 mapStateToProps 中的参数允许用户使用“this.props”在整个组件中更一致地访问来自 redux 存储的表单的特定名称