React中的菜单材料UI组件在使用扩展为Component的类时不起作用

Question

我正在使用React和material UI构建一些菜单元素。

如果我将react component用作function，如果单击按钮，菜单将按预期显示，但是如果我使用class extends Component，它将不再打开。

    import React from 'react';
    import {Component } from 'react';
    import Button from "@bit/mui-org.material-ui.button";
    import Menu from "@bit/mui-org.material-ui.menu";
    import MenuItem from "@bit/mui-org.material-ui.menu-item";
    import Fade from "@bit/mui-org.material-ui.fade";

    class  FadeMenu extends Component {

        constructor(props){
            super(props)
            this.state = {
                anchorEl : null,
                open: false
            }
            this.setAnchorEl = this.setAnchorEl.bind(this)
            this.handleClick = this.handleClick.bind(this)
            this.handleClose = this.handleClose.bind(this)
        }
    handleClick(event) {
        this.setAnchorEl(event.currentTarget);
    }
        setAnchorEl(value){
            this.setState({
                anchorEl: value,
                open: !this.state.open
            })
        }
    handleClose() {
        this.setAnchorEl(null);
    }
    renderMenu(){
      return(
      <Menu id="fade-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleClose} TransitionComponent={Fade}>
            <MenuItem onClick={this.handleClose}>Profile</MenuItem>
            <MenuItem onClick={this.handleClose}>My account</MenuItem>
            <MenuItem onClick={this.handleClose}>Logout</MenuItem>
        </Menu>
       )
    }
    render(){
    return (<div>
        <Button aria-owns={this.state.open ? 'fade-menu' : undefined} aria-haspopup="true" onClick={this.handleClick}>
            Open with fade transition
        </Button>
          {this.renderMenu}
        </div>)
        }

    }

    export default FadeMenu;

Answer 1

问题是您要呈现功能而不是组件：

  {this.renderMenu}

简单地调用该函数以从中获取jsx，它将起作用：

  {this.renderMenu()}