字段组件

Question

我有以下组件结构：

<Selector label="A label">
  <Field name="radioField" component={SelectorItem} value="1">1</Field>
  <Field name="radioField" component={SelectorItem} value="2">2</Field>
</Selector>

因此Field组件映射到我拥有的自定义单选按钮组件，但整个组件由顶级Selector组件和SelectorItem组件组成。如何为Selector包装器组件提供传递给Field组件的错误提议？我connect时是否需要将其拉出状态？我已经看过Redux Form中的FieldArray，但不确定那是否解决了我的问题

Answer 1

通过再次包装并遍历孩子来解决它：

class X extends React.PureComponent {
  render() {
    return (
      <Selector label={label} error={error}>
        {React.Children.map(children, ({ props = {} }) => (
          <SelectorItem
            {...this.props.input}
            value={props.value}
            checked={props.value === input.value}
          >
            {props.children}
          </SelectorItem>
        )}
      </Selector>
    );
  }
}