Компонент пользовательского интерфейса материала меню в React не работает при использовании расширенного класса в качестве компонента - PullRequest
Новая
       36

Компонент пользовательского интерфейса материала меню в React не работает при использовании расширенного класса в качестве компонента

0 голосов
/ 12 октября 2019

Я использую React и material UI для создания некоторых элементов меню.

Если я использую реагирующий компонент как 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;

1 Ответ

1 голос
/ 12 октября 2019

Проблема в том, что вы пытаетесь отобразить функцию, а не компонент: 

  {this.renderMenu}

Вызовите функцию, чтобы получить из нее JSX, и она будет работать: 

  {this.renderMenu()}
...