Javascript react/redux汉堡菜单无法打开

我对redux汉堡菜单文档中的这一行感到困惑：

装饰您的菜单组件：

//Menu.js

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

  export default reduxBurgerMenu(Menu);

从上述文件导出的组件可以像react burger菜单一样使用

如何导入此组件并像使用汉堡包菜单一样使用它

我这里有一个叙述菜单：

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

类叙述菜单扩展了React.Component{
showSettings（活动）{
event.preventDefault（）；
}
render（）{
返回(
);
}
}

---

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

我还发现它有点令人困惑。我让它像这样工作：

import ExampleMenu from 'ExampleMenu'

...

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

                ...

                </div>
            </div>
        )
    }

...

Menu.js：

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

const ReduxBurgerMenu = reduxBurgerMenu(Menu);

export default ReduxBurgerMenu;

ExampleMenu.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;

从“React”导入React；
从“./Menu”导入菜单；
类ExampleMenu扩展了React.Component{
渲染（）{
返回(
);
}
}
导出默认示例菜单；

然后像这样使用它：

import ExampleMenu from 'ExampleMenu'

...

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

                ...

                </div>
            </div>
        )
    }

...

从“ExampleMenu”导入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>
        )
    }

...

Menu.js：

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

const ReduxBurgerMenu = reduxBurgerMenu(Menu);

export default ReduxBurgerMenu;

ExampleMenu.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;

从“React”导入React；
从“./Menu”导入菜单；
类ExampleMenu扩展了React.Component{
渲染（）{
返回(
);
}
}
导出默认示例菜单；

然后像这样使用它：

import ExampleMenu from 'ExampleMenu'

...

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

                ...

                </div>
            </div>
        )
    }

...

从“ExampleMenu”导入ExampleMenu
...
渲染（）{
返回(
...
)
}
...

以简化示例

ExampleMenu.js

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

const ReduxBurgerMenu = reduxBurgerMenu(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;

从“React”导入React；
从“反应汉堡菜单”导入{幻灯片作为菜单}；
从“redux汉堡菜单”导入{decorator as reduxBurgerMenu}；
const ReduxBurgerMenu=ReduxBurgerMenu（菜单）；
类示例菜单扩展React.Component{
渲染（）{
返回(
);
}
}
导出默认示例菜单；

以简化示例

ExampleMenu.js

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

const ReduxBurgerMenu = reduxBurgerMenu(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;

从“React”导入React；
从“反应汉堡菜单”导入{幻灯片作为菜单}；
从“redux汉堡菜单”导入{decorator as reduxBurgerMenu}；
const ReduxBurgerMenu=ReduxBurger菜单（菜单）；
类ExampleMenu扩展了React.Component{
渲染（）{
返回(
);
}
}
导出默认示例菜单；