21

ReactJS と material-ui ( http://material-ui.com/ ) を発見しています。

アプリケーションのデフォルト テンプレートを作成しようとしています。別のコンポーネントで AppBar とLeftNav (新しいバージョンの Drawer で名前が変更されました)を使用したいと考えています。

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;
4

3 に答える 3

6

この場合、イベントをコンポーネントを介して上向きに渡し、次に下向きに渡す必要があります。

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

ただし、これを Reactjs と組み合わせて使用​​することは最適ではありません。LeftNav マテリアル コンポーネントは属性に反応せず、あなたが言っていたようなメソッド呼び出しに反応するからです。

回避するには、現在の状態をチェックし、必要に応じて toggle() を呼び出す LeftNav render メソッドにチェックを入れることができます。原則として、これは React の考え方に反します。状態は、それを処理する DefaultComponent ではなく、特定の子コンポーネント内に含まれるからです。

render:function(){
  if(this.props.isOpen){
     LeftNav.open();
  }
  return ...
于 2015-02-24T12:12:47.407 に答える
5

steinso の発言を明確にするには、Flux アーキテクチャを使用してイベントをアクションに送信し、ストアで変更する必要があります。次に、EventEmitter を使用して発行変更イベントをディスパッチします。これにより、影響を受けるコンポーネントのレンダリングが更新された状態で開始されます。

https://facebook.github.io/flux/

その場合、それらを分離する必要がある場合は、それが最善の方法です。ただし、「Main」などの同じコンポーネントにそれらを含めることができる場合は、単に ref 属性を使用してコンポーネントを参照できます。

module.exports = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

  _toggleNav: function(){
    this.refs.leftNav.toggle();
  },

  render: function() {
    return (
      <div>
        <mui.LeftNav
          ref='leftNav'
          menuItems={menuItems}
          docked={false} />
        <mui.AppBar
          title='Default'
          onLeftIconButtonTouchTap={this._toggleNav} />
      </div>
    );
  }

});

そのようです。

于 2015-06-08T02:04:59.963 に答える