javascript - React/redux 汉堡菜单无法打开

Question

我对 redux-burger-menu 文档中的这一行感到困惑:

https://negomi.github.io/redux-burger-menu/

装饰你的菜单组件:

//菜单.js

  import {slide as Menu} from 'react-burger-menu';
  import {decorator as reduxBurgerMenu} from 'redux-burger-menu';

  export default reduxBurgerMenu(Menu);

从上述文件中导出的组件可以像react-burger-menu一样使用。

如何导入这个组件并像react-burger-menu一样使用它？

我这里有一个 NarrativeMenu:

class NarrativeMenu extends React.Component {
showSettings(event) {
    event.preventDefault();
}

render() {
    return (
          <Menu>
            <a id="home" className="menu-item" href="/">Home</a>
            <a id="about" className="menu-item" href="/about">About</a>
            <a id="contact" className="menu-item" href="/contact">Contact</a>
            <a onClick={ this.showSettings } className="menu-item--small" href="">Settings</a>
          </Menu>
    );
}
}

如何将它与 redux 汉堡菜单一起使用？

Answer 1

我也觉得有点困惑。我让它像这样工作:

菜单.js:

import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';

const ReduxBurgerMenu = reduxBurgerMenu(Menu);

export default ReduxBurgerMenu;

示例菜单.js:

import React from 'react';
import ReduxBurgerMenu from './Menu';

class ExampleMenu extends React.Component {
    render () {
        return (
            <ReduxBurgerMenu isOpen={ this.props.isOpen }>
                <a id="home" className="menu-item" href="/">Home</a>
                <a id="about" className="menu-item" href="/about">About</a>
                <a id="contact" className="menu-item" href="/contact">Contact</a>
            </ReduxBurgerMenu>
        );
    }
}

export default ExampleMenu;

然后像这样使用它:

import ExampleMenu from 'ExampleMenu'

...

    render () {
        return (
            <div id="outer-container">
                <Header />
                <ExampleMenu pageWrapId={"page-wrap"} outerContainerId={"outer-container"} />
                <div id="page-wrap">

                ...

                </div>
            </div>
        )
    }

...