我尝试使用Material-UI(1.0.0-beta.4)<Button>
,<Menu>
和{{1}组合一个通用选择菜单} 组件。
不可避免地会因使用<MenuItem>
投掷而爆炸:
<Menu>
正如您所看到的,尽管出现了错误消息,但我明确地导出了这个课程。如果我删除React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
,即使我保留了子<Menu>
标记,该错误也会消失。
知道出了什么问题?如何解决这个问题?
这是班级:
<MenuItem>
以下是我尝试使用它的方法:
class SelectMenu extends React.Component{
constructor(props){
super(props);
this.state = {
open: false,
selectedIndex: 0
};
this.closeMenu = this.closeMenu.bind(this);
this.openMenu = this.openMenu.bind(this);
this.handleSelect = this.handleSelect.bind(this);
}
openMenu(event){
this.setState({ open: true, anchorEl: event.currentTarget });
}
closeMenu(){
this.setState({ open: false });
}
handleSelect(selectedValue, i){
this.props.handleSelect(selectedValue);
this.state.selectedIndex = i;
this.closeMenu();
};
render(){ return (
<div ref={el=>this.anchorEl=el}>
<Button
onClick={this.openMenu}
>
{this.props.children}
</Button>
<Menu
id="simple-menu"
anchorEl={this.props.anchorEl}
open={this.state.open}
onRequestClose={this.closeMenu}
>
{this.props.items.map((item,i) =>
<MenuItem
key={i}
selected={i === this.state.selectedIndex}
onClick={()=>(this.handleSelect(this.props.valueFor(item)))}
>
{this.props.labelFor(item)}
</MenuItem>
)}
</Menu>
</div>
)}
}
export default SelectMenu