如何在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 或其他事件，但此示例会在组件安装时一次获取项目。