如何在React js中将数组数据绑定到dropdwon

Question

我在数组下面。

["Strong", "Good", "Satisfactory", "Weak", "Default", "None"]

我想将每个值绑定到下拉列表，以便用户可以使用下拉控件从中选择任何一个。

我正在努力使用react js做到这一点。我正在使用react boostrap下拉列表。

请您帮忙。提前致谢。我有以下用于下垂的代码。

<Dropdown id={id} key={id}>
  <Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 0
    </Dropdown.Item>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 1
    </Dropdown.Item>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 2
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

Answer 1

映射数组项，然后像这样在JSX中进行渲染：

//var arr=["Strong", "Good", "Satisfactory", "Weak", "Default", "None"];
//map over the above array 

<Dropdown>
  <Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
  <Dropdown.Menu>
     {arr.map(item => (
       <DropdownItem>{item}</DropdownItem>
     ))}
  </Dropdown.Menu>
</Dropdown>