<menu> throws&#34; type is invalid&#34;错误...无论我做什么

时间:2017-08-10 04:44:25

标签: reactjs material-ui

我尝试使用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

0 个答案:

没有答案