データをmaterial-uiドロップダウンに読み込んでくださいReact JS

Question

私はいくつかの助けが必要です、私はドロップダウンにデータを取り込みたい、私は材料-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> 
); 
} 
} 

あなたが見ることができるように、この移入を、私は「ハードコードされた」私のドロップダウンメニューでいくつかのオプションを持っているが、私はそれを動的にしたいので、より多くのオプションを小道具に追加された場合それらは自動的に。

誰か助けてもらえますか？

よろしくお願いいたします。

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

は、単にそれらを介してマッピングし、あなたが同じ結果を得るでしょう：

Answer 1

あなたは配列としてそれらの小道具を送ることができると仮定すると、あなたの時間

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