Question

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

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

装饰您的菜单组件：

// 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

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

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;

然后像这样使用它：

import ExampleMenu from 'ExampleMenu'

...

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

                ...

                </div>
            </div>
        )
    }

...

Answer 2

为简化 Jan Caals 示例。

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 / redux汉堡菜单无法打开

2 个答案: