reactjs - Redux 表单 - 动态添加 prop 名称到 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

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 上还有一个 Unresolved 问题: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,
};