Я пытался реализовать React JS с пользовательским интерфейсом материала и застрял на проблеме с поведением переключения левой панели навигации.
Я создал компоненты с помощью команд Yeoman.
Есть 2 компонента
BodyComponent - Родитель
HeaderCompoent- дочерний элемент
В Body Component я создал menuItem и LeftNavBar, а в HeaderComponent я создал AppBar с событием onLeftIconButtonTouchTap={this._handleTouch}, но когда я нажимаю на значок гамбургера, он выдает navLeft undefined.
Насколько я понимаю, проблема здесь в том, что событие вызывается для дочернего элемента, а ссылка LeftNavBar находится в родительском, что каким-то образом я не могу получить к нему доступ.
Я читал, что их можно решить любым другим способом, но собрав все компоненты вместе, а не разделив их, но я не хочу их разделять, а также я не хочу использовать поток для решения этой проблемы.
Есть ли хорошее решение для этого? или мне нужно изменить способ написания кода? если да, то как?
Компонент тела
/*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;