我有 2 个几乎相同的组件，它们通过选项数组进行映射并生成复选框或单选按钮。组件之间的唯一区别是呈现的子组件（复选框或单选输入）。

我想减少这些组件中的重复代码，但我不确定解决它的最佳方法。我可以将 2 个组件合并为一个组件，例如 FormControlGroup ，并添加更多 props 以允许我选择是否要呈现复选框或单选按钮，例如 checkboxOrRadio ，但这意味着如果我添加复选框或单选按钮的新变体，例如 CustomCheckbox ，我将不得不继续扩展此组件的 props。

<FormControlGroup
  label="Radio buttons"
  name="test"
  options=[{label: 'one', value: 1}, {label: 'two', value: 2}, {label: 'three', value: 3}]
  checkboxOrRadio="radio"
/>

是否可以（并且合理地）将组件作为 prop 传入并在 map 函数中呈现该组件？ 如果可以，我该怎么做？或者有更优雅的解决方案？这样，我可以传入任何我想要的组件，它将被呈现，并将 key、name、label、onChange、value、checked 属性传递给它。

CheckboxGroup.js

import React from 'react';
import CheckboxInput from './CheckboxInput';

const CheckboxGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <CheckboxInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default CheckboxGroup;

RadioGroup.js

import React from 'react';
import RadioInput from './RadioInput';

const RadioGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <RadioInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default RadioGroup;