1

マテリアル UI を使用して React JS を実装しようとしていたところ、左ナビゲーション バーのトグル動作の問題に行き詰まりました。

Yeoman コマンドを使用してコンポーネントを作成しました。

2つのコンポーネントがあります

BodyComponent - 親

HeaderCompoent - 子

Body Component で menuItem と LeftNavBar を作成し、HeaderComponent でonLeftIconButtonTouchTap={this._handleTouch}イベントを使用して AppBar を作成しましたが、ハンバーガー アイコンをクリックすると navLeft is undefined がスローされます。

私の理解によると、ここでの問題は、イベントが子で呼び出され、LeftNavBar の参照が親であるということです。これはどういうわけかアクセスできません。

これらは解決できると読んだことがありますが、すべてのコンポーネントを分離するのではなく一緒に配置しますが、分離したくありません。また、この1つの問題を修正するためにフラックスを使用したくありません。

これに対する良い解決策はありますか？または、コードの書き方を変更する必要がありますか? はいの場合、どのように？

ボディ コンポーネント 

/*jshint esnext: true */
'use strict';

import React from 'react';
import mui from 'material-ui';
import Header from './HeaderComponent';

require('styles//Body.sass');

const LeftNav = require('material-ui/lib/left-nav');
const Tabs = require('material-ui/lib/tabs/tabs');
const Tab = require('material-ui/lib/tabs/tab');
const MenuItem = mui.MenuItem;

// injectTapEventPlugin = require("react-tap-event-plugin");
// injectTapEventPlugin();


var menuItems = [{
  route: 'device',
  text: 'Device'
}, {
  type: MenuItem.Types.SUBHEADER,
  text: 'xyz'
}, {
  route: 'xyz1',
  text: 'xyz1'
}, {
  route: 'xyz2',
  text: 'xyz2'
}, {
  route: 'xyz3',
  text: 'xyz3'
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://github.com/callemall/material-ui',
  text: 'GitHub'
}, {
  text: 'Disabled',
  disabled: true
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://www.google.com',
  text: 'Disabled Link',
  disabled: true
}];


class BodyComponent extends React.Component {

  render() {
    return (
      < div className = "body-component" >
      < LeftNav ref = "leftNav"
        header = { < Header / > }
        docked = { true }
        menuItems = { menuItems }/>
      < Tabs >
        < Tab label = "Item One" >
        (Tab content...)
        < /Tab>
        < Tab label = "Item Two" >
        (Tab content...)
        < /Tab>
        < Tab label = "Item Three"
        route = "home"
        onActive = {
          this._handleTabActive
        }>
        </ Tab>
      < /Tabs>
      < /div>
    );
  }
}

BodyComponent.displayName = 'BodyComponent';

// Uncomment properties you need
// BodyComponent.propTypes = {};
// BodyComponent.defaultProps = {};

export default BodyComponent;

ヘッダー コンポーネント

/*jshint esnext: true */
'use strict';

import React from 'react';
import Body from './BodyComponent';
import mui from 'material-ui';
const AppBar = require('material-ui/lib/app-bar');

//import ActionCreator from '../actions/AppBarActionCreators';
const injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();


require('styles//Header.sass');


class HeaderComponent extends React.Component {

  _handleTouch() {
    console.log(this);
    this.refs.leftNav.toggle();
  }

  render() {
    return (
      <div className="header-component">
      < AppBar title = "vEDM"
      onLeftIconButtonTouchTap={this._handleTouch}
      iconClassNameRight = "muidocs-icon-navigation-expand-more" / >
      </div>
    );
  }
}
HeaderComponent.displayName = 'HeaderComponent';

export default HeaderComponent;
4

1 に答える 1

1

で、BodyComponentleftNav を切り替える関数を作成し、それを props としてHeader

体

class BodyComponent extends React.Component {

  toggleLeftNav() {
    this.refs.leftNav.toggle();
  }

  render() {
    return (
      < div className = "body-component" >
      < LeftNav ref = "leftNav"
        header = { < Header toggleLeftNav={ this.toggleLeftNav.bind(this) } /> }
        docked = { true }
        menuItems = { menuItems }/>
      < Tabs >
        < Tab label = "Item One" >
        (Tab content...)
        < /Tab>
        < Tab label = "Item Two" >
        (Tab content...)
        < /Tab>
        < Tab label = "Item Three"
        route = "home"
        onActive = {
          this._handleTabActive
        }>
        </ Tab>
      < /Tabs>
      < /div>
    );
  }
}

ヘッダ

class HeaderComponent extends React.Component {

  _handleTouch() {
       this.props.toggleLeftNav();
  }

  render() {
    return (
      <div className="header-component">
      < AppBar title = "vEDM"
      onLeftIconButtonTouchTap={this._handleTouch.bind(this)}
      iconClassNameRight = "muidocs-icon-navigation-expand-more" / >
      </div>
    );
  }
}
于 2015-11-30T15:54:53.560 に答える