将数据填充到 material-ui 下拉列表 React JS

Question

我需要一些帮助，我想将数据填充到下拉列表中，我正在使用 material-ui 但我不知道该怎么做，我真的很新反应，我知道我可以使用道具，然后将其传递给下拉菜单，但对我来说不是很清楚。

这是我的代码：

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

export default class CreateLinksave extends React.Component {
 constructor(props) {
   super(props);
   this.state = {value: 1
   };
   this.handleChange=this.handleChange.bind(this);
 }
 handleChange(event, index, value) {this.setState({value});}
render() {
 return (
    <div className="container">
     <div>
       <RaisedButton label="Copy an existing Global Multisave"/>
     </div>
      <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        <MenuItem value={1} primaryText="Never" />
        <MenuItem value={2} primaryText="Every Night" />
        <MenuItem value={3} primaryText="Weeknights" />
      </DropDownMenu>
      </div>
     </div>
  );
 }
}

如您所见，我的下拉列表中有一些选项"硬编码"，但我想让它动态化，所以如果将更多选项添加到 props，那么这会自动填充它们。

有人可以帮我解决这个问题吗？

问候。

Answer 1

假设您可以将这些 props 作为数组发送：

items = [
  { value: 1, primaryText: 'Never' },
  { value: 2, primaryText: 'Every Night' },
  { value: 3, primaryText: 'Weeknights' },
]

只需映射它们，您将获得相同的结果：

render() {
  return (
    <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        {this.props.items.map(item =>
          <MenuItem key={item.value} {...item} />
        )}
      </DropDownMenu>
    </div>
  )
}