影響與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反應的多個組件的狀態

回答

相關問題