React bootstrap：如何将数组传递给 Form.Control 中的选项

Question

我正在使用 Form.Control 创建一个下拉列表，我想让该列表动态化。我的代码如下所示：

render() {
 return (

 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  <option value={myArray[0].value}> myArray[0].value </option>
  <option value={myArray[1].value}> myArray[1].value </option>
 </Form.Control>

 )
}

显然这仅在有两个元素时才有效myArray。我想找到一种动态传递myArray到options“Form.Control”的方法。我在这里找到了有关如何使用它的答案，但它似乎不像我在这里那样Select工作。Form.Control as ="select"

谢谢

Answer 1

渲染动态元素列表的标准方法是映射一个数组：

render() {
 return (
 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  {myArray.map(opt => (
    <option value={opt.value}>{opt.value}</option>
  ))}
 </Form.Control>
 )
}

keyReact 会要求你为映射的元素提供一个唯一的prop。理想情况下，这应该是一个随机 id 字符串，但您可以在开发时添加映射数组的索引myArray.map((opt, i) => ...作为后备（这也是当您不提供索引时它使用的默认值）。