影响与Baobab反应的多个组件的状态

我正在将HTML，CSS和jQuery生成的90％完整网站翻译成更具前瞻性的反应“应用程序”。我有一些非常基本的校长，我正在努力克服 - 我真的很喜欢react的JSX语言，但努力应对我以前在jQuery中实现的繁重的UI操作。影响与Baobab反应的多个组件的状态

为了让我习惯于以我的网站上最简单的交互之一开始的概念 - 将鼠标悬停在菜单按钮上并部分展示侧边菜单（例如20像素）。我的部件结构，像这样：

var App = React.createClass({ 

    render: function() { 
     return (
      <div id="reactWrap"> 
       <MainNav ref="main-nav"/> 
       <SideNav projects={PROJECTS} ref="side-nav" /> 
       <RouteHandler projects={PROJECTS} ref="content" /> 
      </div> 
     ) 
    } 
});

MainNav包括了“汉堡包”按钮，网站标题：

render: function() { 

     return (
      <nav className="fixed-nav"> 
       <div id="menu-button" onMouseEnter={this.teaseMenu} onMouseLeave={this.unteaseMenu} ref="menu-btn"> 
        <span className="menu-line"></span> 
       </div> 
       <span className="site-title">Lorem Ipsum</span> 
      </nav> 
     ) 
    }

当“＃菜单键”悬停我改变了状态树我使用“menuActions.isHovering（）”在“teaseMenu（）”中的Baobab中定义了它。

.... 
teaseMenu: function(e) { 
    menuActions.isHovering(); 
    // other stuff done 
},....

我正在挣扎的是，一旦变化已经在我stateTree受到影响，我不知道该如何然后给这个变化的知识，都依赖于它的其他元素。例如，与“MainNav”完全无关的SideNav和它的子菜单“＃menu-button”如何意识到这种变化并相应地改变它的状态？这只会在jQuery中需要解决的东西，如下列：

globalVars.menuBtn.on({ 
    mouseenter: function(e) { 
     var self = $(this); 
     var movePercentage = (-100 + (20/globalVars.sideNavW * 100))/2; 

     if (!pageStatus.menuActive) { 
      globalVars.wrap.addClass('menu-hover'); 
      globalVars.sideNav.css({ 
       'left': movePercentage + '%' 
      }); 
      menuBtnIn(e, self); 
     } 

    },....

来源

2015-08-08 user3586963

Flux是做一个很好的方式，我强烈建议你其纳入到你的网站，因为它会让很多事情变得更简单。在此页面的更多信息请阅读：https://facebook.github.io/flux/docs/overview.html

然而，你也可以使用状态在根App影响上MainNav变化，只要东西在SideNav发生。

考虑这种变化你的根应用组件：

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      sideNavShowSomething: false 
     } 
    }, 

    mainNavChangeHandler: function(sideNavShowSomething) { 
     this.setState({ 
      sideNavShowSomething: sideNavShowSomething 
     }) 
    }, 

    render: function() { 
     return (
      <div id="reactWrap"> 
       <MainNav ref="main-nav" onChange={this.mainNavChangeHandler} /> 
       <SideNav projects={PROJECTS} ref="side-nav" showSomething={this.state.sideNavShowSomething} /> 
       <RouteHandler projects={PROJECTS} ref="content" /> 
      </div> 
     ) 
    } 
});

以上是你如何使用你的根App的状态影响到它的孩子变化的例子。你的MainNav现在需要一个onChange这是一个功能。这个功能在MainNav的任何时间发生变化时都会通知你的根目录App。在这个例子中，mainNavChangeHandler用布尔值sideNavShowSomething变量执行。在你的情况，你可能想要做更复杂的东西;）

所以，当你在MainNav那么你的根应用程序调用this.props.onChange(true)将更新它的状态，然后SideNav将收到this.props.showSomething为真wheras以前是假的。通过这样做，您可以通过将回调用于根App并处理新的道具以向他们提供儿童，从而影响儿童组件之间的变化。

来源

2015-08-09 01:23:53

影响与Baobab反应的多个组件的状态

回答

相关问题