reactjs - Material UI - 在 AppBar 单击上打开 LeftNav/Drawer

Question

我正在发现 ReactJS 和material-ui ( http://material-ui.com/ )。

我尝试为我的应用程序创建默认模板。我想在单独的组件中使用 AppBar 和 LeftNav(在新版本中在抽屉中重命名)。

默认情况下，AppBar 上有一个菜单按钮。我想用它来打开 LeftNav，但我不知道如何调用我的 LeftBarComponent 组件函数来打开它。

我几乎了解了如何在组件之间进行通信，但就我而言，我不知道该怎么做，因为没有关于它的文档。我唯一知道打开 LeftNav 元素是使用 LeftNav.toggle()

http://material-ui.com/#/components/left-nav

感谢您的帮助。

默认.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end */
    );
  },
  // Event handler for 'change' events coming from store mixins.
  _onChange: function() {
    this.setState(getState());
  }
});

module.exports = DefaultComponent;

navbar.jsx

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var AppBar = MUI.AppBar;

// Navbar Component
// Application main menu
// Usage: <Navbar />
var NavbarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }>
        <div className="clear"></div>
      </AppBar>
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = NavbarComponent;

leftbar.jsx

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var LeftNav = MUI.LeftNav;
var MenuItem = MUI.MenuItem;

var menuItems = [
  { route: 'home', text: 'Home' },
  { route: 'about', text: 'About' },
];

// LeftBar Component
// Application left menu
// Usage: <LeftBar />
var LeftBarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <LeftNav menuItems={menuItems} docked={false} />
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = LeftBarComponent;

Answer 1

在这种情况下，您需要通过组件向上传递事件，然后再次向下传递。

    <MainNavbar onClickMenu=this.onClickMenu/>
    <LeftNavbar isOpen=this.state.leftNavIsOpen/>

但是，将其与 Reactjs 结合使用并不是最佳选择，因为 LeftNav Material 组件不会对属性使用react，而是对方法调用使用react，就像您所说的那样。

要解决此问题，您可以在 LeftNav 渲染方法中进行检查，该方法检查当前状态，并在需要时调用toggle()。原则上，这违背了 React 的思维方式，因为状态包含在特定的子组件中，而不是在处理它的 DefaultComponent 中。

render:function(){
  if(this.props.isOpen){
     LeftNav.open();
  }
  return ...