React JS+Material UI抛出的leftNav未定义
React JS + Material UI throwing leftNav is undefined
我试图用Material UI实现React JS,但遇到了左导航栏切换行为的问题。
我已经使用Yeoman命令创建了组件。
有两个组件
车身组件-父
收割台组件-子
在Body Component中我创建了menuItem和LeftNavBar,在HeaderComponent中我使用onLeftIconButtonTouchTap={this._handleTouch}事件创建了AppBar,但当我单击汉堡图标时,它抛出的navLeft未定义。
根据我的理解,这里的问题是在子级调用事件,LeftNavBar的引用在父级,这是我无法访问的。
我读到这些问题可以解决,但将所有组件放在一起而不是分离,但我不想将其分离,也不想使用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;
在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>
);
}
}
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- 要求未定义JS回调参数
- 如何检查管道中未定义的项目
- TypeError:无法读取属性'推'未定义的JavaScript
- $window.ga在AngularJS事件中未定义
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 无法获取属性'selectedIndex'的未定义引用或null引用
- 如何消除代码中的未定义和其他问题
- 未捕获的ReferenceError:$未定义
- this.router在AngularJS 2中未定义
- 未捕获的类型错误:无法读取属性'删除'的未定义
- 节点fs.stat名称未定义
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- Jquery未定义函数正在停止其他操作
- AngularJS指令出错-无法读取属性'编译'的未定义
- 这.SOMETHING 总是返回未定义的 - extjs
- 无法获取属性'Id'使用Knockout.js的未定义或空引用API
- Wordpress中带有JQuery Accordion的未定义匿名函数
- React JS+Material UI抛出的leftNav未定义