Question

我试图在react sideNav点击时打开button栏。我引用这些文章来做到这一点：

我已正确实施，但在点击sideNav时我仍然坚持打开button。

<div>
    <MenuIcon onClick={() => this.setState({showNav: true})}/>
    <SideNav
        title="Simple Sidenav"
        items={['Item 1', 'Item 2']}
        openFromRight="true"
        showNav = {this.state.showNav}
    />
</div>

如果我提供showNav = 'true'，则会在页面打开时默认打开sideNav。如果我给showNav = {this.state.showNav}我收到错误：

Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>. See div > App > html.
printWarning @ bundle.js:11845
bundle.js:35792 Uncaught TypeError: Cannot read property 'showNav' of null
    at Notification.render (bundle.js:35792)
    at bundle.js:26635
    at measureLifeCyclePerf (bundle.js:25914)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:26634)
    at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:26661)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26201)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:26097)
    at Object.mountComponent (bundle.js:18478)
    at ReactDOMComponent.mountChildren (bundle.js:25215)
    at ReactDOMComponent._createInitialChildren (bundle.js:22220)

Answer 1

检查github链接，在描述中他们没有定义showNav变量的初始状态，您需要在组件中添加此部分，以定义它的初始值工作：

getInitialState : function() {
   return {
     showNav: false,
   };
},

如果您检查项目文件demo/src/layout.js，则定义了showNav，在描述中他们没有编写工作代码，主要关注如何使用SideNav，一个示例代码。

<强>更新：

import react from 'react';
import SideNav, {MenuIcon} from 'react-simple-sidenav';

React.createClass({

  getInitialState : function() {
     return {
        showNav: false,
     };
  },

  render() {
    .....
  }
})

Answer 2

启动showNav＆＃39;

的状态

this.state = {
 showNav: false
}

Answer 3

const [showNav, setShowNav] = useState(false)
    return (

    <MenuIcon className="MenuIconStyle" onClick={() => setShowNav(true)} />
                <SideNav
                    showNav={showNav}
                    onHideNav={() => setShowNav(false)}
                    items={['Item 1', 'Item 2']}
                    titleStyle={{ backgroundColor: '#4CAF50' }}
                    itemStyle={{ backgroundColor: '#fff' }}
                    itemHoverStyle={{ backgroundColor: '#CDDC39' }}
                    openFromRight={false}
                />

打开reactjs sideNav点击

3 个答案: