Question

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

但是我使用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>
);
     }
    }

菜单项

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>
        );
    }
}

第一次点击按钮时菜单会打开。如果我再次点击按钮，菜单将关闭。但如果我第三次点击按钮就没有任何反应。 Chrome控制台中的菜单无法打开且没有错误消息。它可以是EventListener的东西吗？如果我发表评论document.removeEventListener("click", this.hide.bind(this));

，我会得到相同的结果

Answer 1

我认为它不相关，但Layout应该有一个使用return(...)返回组件的render（）方法。

Answer 2

试试这个（在菜单中渲染功能）：

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 &&与if(this.state.visible === true)

类似

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

Answer 3

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

npm install --save react-side-bar

React es6幻灯片菜单仅运行一次

3 个答案: