Redux 表单 - 向 FormSection 动态添加道具名称

Question

我想知道如何动态地向表单部分添加名称，而不是像 example 中那样使用静态名称。我试过这样的事情：

class Address extends FormSection {

    render() {
        return <div>
            <Field name="streetName" component="input" type="text"/>
            <Field name="number" component="input" type="text"/>
            <Field name="zipCode" component="input" type="text"/> 
        </div>
    }
}

Address.PropTypes = {
  name: PropTypes.string.isRequired,
};

我从连接到 redux-form 的父组件调用此组件，如下所示：

  <Address
    name={formSectionName}
  />

但是，没有渲染任何东西，我想用单选按钮切换它，但组件永远不会被渲染。我该怎么做，并动态设置 FormSection 的名称？

Answer 1

Class Javascript 中的继承有点棘手，但我不想在这里详述。

但我看到的是列出的继承示例，附带一个警告，不能更改名称：https://redux-form.com/7.4.2/docs/api/formsection.md/#example-usage

"For component such as Address that rarely change form section name it can be benificial to make the component inherit from FormSection instead of Component and set a default name prop as seen below"

据我所知，通过继承来实现，你不能再使用外部 prop 来控制它，而是使用静态默认 prop...

我个人对这个例子的看法是，老实说，我觉得它有点令人困惑。对于这个确切的问题，github 上还有一个未解决的问题：https://github.com/erikras/redux-form/issues/4359

但是你为什么不采用这种方法呢？我会通过组合来解决它。

class Address extends React.Component {

    render() {

        const { name } = this.props;

        return (
           <FormSection name={name}>
            <div>
              <Field name="streetName" component="input" type="text"/>
              <Field name="number" component="input" type="text"/>
              <Field name="zipCode" component="input" type="text"/> 
            </div>
          </FormSection>
         )
    }
} 
Address.propTypes = {
  name: PropTypes.string.isRequired,
};

Redux 表单 - 向 FormSection 动态添加道具名称

Redux form - adding dynamically prop name to FormSection

reactjs

redux-form