我有以下React.js应用程序结构:
<App /> <BreadcrumbList> <BreadcrumbItem /> <BreadcrumbList/> <App />
问题是,当我单击时<BreadcrumbItem />,我想在其中更改状态<App />
<BreadcrumbItem />
<App />
我使用回调将道具传递给,<BreadcrumbList/>但是那是我走了多远。有没有pattaren如何轻松地将道具传递到要素树上?
<BreadcrumbList/>
如何在<App />不进行任何回调链接的情况下将prop传递给?
如果您正在做一些简单的事情,那么通常最好将状态更改通过组件层次结构传递,而不是专门为此目的创建存储(不管它可能是什么)。我将执行以下操作:
面包屑项目
var React = require('react/addons'); var BreadcrumbItem = React.createClass({ embiggenMenu: function() { this.props.embiggenToggle(); }, render: function() { return ( <div id="embiggen-sidemenu" onClick={this.embiggenMenu} /> ); } }); module.exports = BreadcrumbItem ;
然后通过BreadcrumbList组件将其传递给父对象。
<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>
…并转到App,然后使用它来设置状态。…
var React = require('react/addons'); var App = React.createClass({ embiggenMenu: function() { this.setState({ menuBig: !this.state.menuBig }); }, render: function() { return ( <div> <BreadcrumbList embiggenToggle={this.embiggenMenu} /> </div> ) } }); module.exports = BreadcrumbItem;
本示例切换一个简单的布尔值,但是您可以忽略任何喜欢的内容。我希望这有帮助。
我尚未对此进行测试,但是(已)从一个实际的工作示例中将其快速删除。
编辑:根据要求,我将在含糊的地方进行扩展:“您可以放弃任何东西”。
如果您要基于数组制作导航菜单,并且需要将所选项目传递给父项,则可以执行以下操作
var React = require('react/addons'); var ChildMenu = React.createClass({ getDefaultProps: function () { return { widgets : [ ["MenuItem1"], ["MenuItem2"], ["MenuItem3"], ["MenuItem4"], ["MenuItem5"], ["MenuItem6"], ["MenuItem7"] ] } }, handleClick: function(i) { console.log('You clicked: ' + this.props.widgets[i]); this.props.onClick(this.props.widgets[i]); }, render: function() { return ( <nav> <ul> {this.props.widgets.map(function(item, i) { var Label = item[0]; return ( <li onClick={this.handleClick.bind(this, i)} key={i}> {Label} </li> ); }, this)} </ul> </nav> ); } }); module.exports = ChildMenu;
然后,您将在父级中执行以下操作:
var React = require('react/addons'); var ChildMenuBar = require('./app/top-bar.jsx'); var ParentApp = React.createClass({ widgetSelectedClick: function(selection) { //LOGGING //console.log('THE APP LOGS: ' + selection); //VARIABLE SETTING var widgetName = selection[0]; //YOU CAN THEN USE THIS "selection" //THIS SETS THE APP STATE this.setState({ currentWidget: widgetName }); }, render: function() { return ( <ChildMenu onClick={this.widgetSelectedClick} /> ); } }); module.exports = ParentApp;
我希望这有帮助。感谢您的支持。