我发现了ReactJS和material-ui(http://material-ui.com/)。
我尝试为我的应用程序创建默认模板。 我想在分离的组件中使用AppBar和 LeftNav(在新版本的Drawer中重命名)。
默认情况下,AppBar上有一个菜单按钮。我想用它打开LeftNav,但我不知道如何调用我的LeftBarComponent组件函数来打开它。
我几乎了解如何在组件之间进行通信,但在我的情况下,我不知道如何做,因为没有关于它的文档。 我知道打开LeftNav元素的唯一方法是使用LeftNav.toggle()
http://material-ui.com/#/components/left-nav
感谢您的帮助。
Default.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;
答案 0 :(得分:5)
在这种情况下,您需要将事件向上传递到组件中,然后再向下传递。
<MainNavbar onClickMenu=this.onClickMenu/>
<LeftNavbar isOpen=this.state.leftNavIsOpen/>
但是,将此与Reactjs结合使用并不是最佳选择,因为LeftNav材质组件不会对属性做出反应,而是对您所说的方法调用做出反应。
要解决此问题,您可以检查LeftNav渲染方法,检查当前状态,并在需要时调用toggle()。原则上,这违反了React的思维方式,因为状态包含在特定的子组件中,而不是在处理它的DefaultComponent中。
render:function(){
if(this.props.isOpen){
LeftNav.open();
}
return ...
答案 1 :(得分:5)
为了澄清steinso所说的内容,您需要使用Flux架构将事件发送到Action,然后在Store中进行更改。然后使用EventEmitter调度emit change事件。这将触发受影响的组件上具有更新状态的渲染。
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>
);
}
});
喜欢这样。
答案 2 :(得分:1)
我正在使用React with Material-UI,我使用AppBar中的 onLeftIconButtonTouchTap = {this.handleToggle} 事件完成了此操作。有关更多详细信息,请参阅官方文档http://www.material-ui.com/#/components/app-bar
<强> App.js 强>
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard/dashboard.js';
import Information from './Information/information.js';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
handleToggle = (event) => this.setState({open: !this.state.open});
render() {
const {styleFromProps} = this.props;
const contentStyle = { ...styleFromProps, transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };
if (this.state.open) {
contentStyle.marginLeft = 256;
}
return (
<Router>
<div>
<AppBar title="AppTitle" onLeftIconButtonTouchTap={this.handleToggle} />
<Drawer containerStyle={{height: 'calc(100% - 64px)', top: 64}} docked={true} width={200} open={this.state.open} zDepth={2}>
<Link to="/dashboard" style={{ textDecoration: 'none' }}><MenuItem>Dashboard</MenuItem></Link>
<Link to="/information" style={{ textDecoration: 'none' }}><MenuItem>Information</MenuItem></Link>
</Drawer>
<Route path="/dashboard" component={(props) => <Dashboard {...props} open={this.state.open}/>} />
<Route path="/information" component={(props) => <Information {...props} open={this.state.open}/>} />
</div>
</Router>
);
}
}
export default App;
我认为它会对你有帮助。