material-ui popoverに動的要素を作成するにはどうすればよいですか？

Question

material-ui popoverで動的要素を作成する方法は？私はそれのための例が欲しい。

Answer 1

class MyPopover extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { popoverItems: [] }; 
    } 

    componentDidMount() { 
     ... fetch popover items ... 
     ... set state ... 
    } 
    render() { 
     return (
      <MuiThemeProvider> 
       <Popover 
        open={this.state.open} 
        anchorEl={this.state.anchorEl} 
        anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} 
        targetOrigin={{horizontal: 'left', vertical: 'top'}} 
        onRequestClose={this.handleRequestClose} 
       > 
        <Menu> 
         {this.state.popoverItems.map((item) => { 
          <MenuItem primaryText={item.name} /> 
         })} 
        </Menu> 
       </Popover> 
      </MuiThemeProvider> 
     ) 
    } 

} 

また、onClickなどのイベントを取得することもできますが、この例ではコンポーネントがマウントされたときにアイテムを一度取得します。