React es6幻灯片菜单只能运行一次

I started with this code: https://www.codementor.io/reactjs/tutorial/how-to-build-a-sliding-menu-using-react-js-and-less-css

我从这段代码开始:https://www.codementor.io/reactjs/tutorial/how-to-build-a-sliding-menu-using-react-js-and-less-css

But I'am using es6 and tried to convert the code. This is my result

但我使用es6并试图转换代码。这是我的结果

    import Menu from "../components/layout/Menu";
    import MenuItem from "../components/layout/MenuItem";

    export default class Layout extends React.Component {   
    render() { 
    return (
            <Menu ref="right" alignment="right">
              <MenuItem hash="first-page">First Page</MenuItem>
              <MenuItem hash="second-page">Second Page</MenuItem>
              <MenuItem hash="third-page">Third Page</MenuItem>
            </Menu>
);
     }
    }

MenuItem

import React from 'react';

export default class MenuItem extends React.Component {
    navigate(hash) {
        window.location.hash = hash;
    }

    render() {
        return (
            <div className="menu-item" onClick={this.navigate.bind(this, this.props.hash)}>{this.props.children}</div>
        );
    }
}

import React from 'react';

export default class Menu extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false
        }
    };

    show() {
        this.setState({visible: true});
        document.addEventListener("click", this.hide.bind(this));
    }

    hide() {
        this.setState({visible: false});
        document.removeEventListener("click", this.hide.bind(this));
    }

    render() {
        return (
            <div className="menu">
                <div className={(this.state.visible ? "visible " : "") + this.props.alignment}>{this.props.children}</div>
            </div>
        );
    }
}

The menu opens when I click the button the first time. The menu closes if I click on the button a second time. But if I click on the button a third time nothing happens. The menu does not open and no error messages in the Chrome console. Can it be something with the EventListener? I get the same result if I comment out document.removeEventListener("click", this.hide.bind(this));

第一次单击按钮时菜单打开。如果我再次点击该按钮,菜单将关闭。但如果我第三次点击按钮就没有任何反应。 Chrome控制台中的菜单未打开且没有错误消息。它可以是EventListener的东西吗?如果我注释掉document.removeEventListener(“click”,this.hide.bind(this)),我会得到相同的结果;

3 个解决方案

#1

I don't think it is related but Layout should have a render() method that use return(...) to return the component.

我不认为它是相关的,但布局应该有一个render()方法,使用return(...)来返回组件。

#2

Try this (render function in Menu):

试试这个(菜单中的渲染功能):

render() {
  return (
    <div className="menu">
      {!!this.state.visible &&
        <div className={(this.state.visible ? "visible " : "") + this.props.alignment}>{this.props.children}</div>
      }
    </div>
  );
}

!!this.state.visible && is like if(this.state.visible === true)

!! this.state.visible &&就像if(this.state.visible === true)

What this does is only render the menu if it's visible. It's a more 'reacty' way to do it to hide/show components (it unmounts & mounts all menu children). Otherwise, I'm guessing it may be an issue with the generated visible classname--for example, if this.props.alignment is undefined, or doesn't have a space, what string is being rendered? visibleundefined?, or if defined, does it need a space between visible and alignment?

这样做只是渲染菜单,如果它可见。这是一种更“反应”的方式来隐藏/显示组件(它卸载并安装所有菜单子项)。否则,我猜测它可能是生成的可见类名的问题 - 例如,如果this.props.alignment未定义,或者没有空格,则呈现什么字符串? visibleundefined?,或者如果已定义,它是否需要可见和对齐之间的空格?

#3

Maybe you can use https://www.npmjs.com/package/react-side-bar. There are a complete example in Example and looks fine.

也许你可以使用https://www.npmjs.com/package/react-side-bar。示例中有一个完整的示例,看起来很好。

npm install --save react-side-bar

npm install --save react-side-bar

#1