React JS +材質UI throwing leftNav未定義

Question

我試圖在材質UI中實現React JS，並遇到Left Nav Bar切換行爲的問題。

我已經使用Yeoman命令創建了組件。

有2成分

BodyComponent - 父母

HeaderCompoent-兒童

在身體組分i所創建的菜單項和LeftNavBar並在HeaderComponent我已經建立AppBar與onLeftIconButtonTouchTap = {此._handleTouch}事件，但當我點擊漢堡包圖標時，它拋出navLeft是未定義的。

根據我的理解，這裏的問題是在子節點上調用事件，而LeftNavBar的引用在父節點中，這在某種程度上我無法訪問它。

我已經讀過這些可以解決iether，但把所有的組件在一起，而不是分離，但我不想分開它，我也不想用flux來解決這個問題。

有沒有什麼好的解決方案呢？還是必須改變我寫我的代碼的方式？如果是的話，怎麼樣？

體成分

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

Answer 1

在BodyComponent，你可以創建一個函數來切換leftNav並把它作爲在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> 
    ); 
    } 
}