React组件DRY重构

Question

我正在尝试重构代码以使其更简洁

此元素

layout

以这种状态工作：

const {type} = this.state
...
<div>
  <label>Some label:
    <select
      name="type"
      onChange={this.onSelect}
      className="form-control form-select mb-2">
      {type.map(item => (
        <option key={item.value} value={item.value}>{item.name}</option>
      ))}
    </select>
  </label>
</div>

由于许多相同的... , type: [ { name: 'Choose...', value: null }, { name: 'Type#1', value: 'white' }, { name: 'Type#2', value: 'black' } ], ... 或我希望具有这样的独立组件：

select

并将属性传递给它

const SelectInputGroup = ({
  label,
  name,
  onChange
}) => {
  return (
    <div><label>{label}
    <select
      name={name}
      onChange={onChange}
      className="form-control form-select mb-2 mr-3">
      {name.map(item => (  <<<-- error here
        <option key={item.value} value={item.value}>{item.name}</option>
      ))}
     </select>
     </label>
    </div>
  )
}

在<<<行

上出现错误“ name.map不是函数”

尝试<SelectInputGroup label="Some Label" name="type" onChange={this.OnSelect} /> -错误“无法读取未定义的属性'名称'”

尝试{this.state.name.map(item => (-错误“ {（中间值）}。map不是函数”

我觉得））里面有坏事，但无法弄清楚它在哪里）