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

Question

我需要一些帮助，我想将数据填充到下拉菜单中，我正在使用material-ui，但我不知道该怎么做，我真的很陌生，我知道我可以使用 Prop ，然后将它们传递给下拉菜单，但对我来说并不清楚。

这是我的代码:

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>
  );
 }
}

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

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

问候。

Answer 1

假设您可以将这些 Prop 作为数组发送:

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>
  )
}