ReactJs Mixinは状態を更新/共有していません

Question

React JSの全世界に新しいものがあります。私はmixinを通して機能を共有する2つのコンポーネントを持っています。そのメニューを処理するために、私はボタンをクリックし、状態が真と偽に変わるとうまくいきます。 2番目のコンポーネントの内部では、シャドウ要素をクリックすると、閉じる関数を使用してメニューを閉じます。 close関数を呼び出した後、状態が更新されます。しかし、ボタンをクリックしてメニューを開いても状態はまだ偽です。

アイデア？

--- --- MIXIN

var menuMixin = { 

navIcon: $('#nav-icon'), 
menu: $('#menu'), 
htmlElement: $('html'), 
header: $('header'), 
getInitialState: function() { 

    return { 

     state: false 

    }; 

}, 
openMenu: function(){ 

    var THIS = this;  

    var $navIcon = $('#nav-icon'), 
     $menu = $('#menu'), 
     $html = $('html'), 
     $header = $('header'); 

    $menu.show(); 
    $navIcon.addClass('open'); 

    setTimeout(function(){ 

     THIS.switchLogo(true); 
     $menu.addClass('active'); 
     $html.addClass('fixed'); 
     $header.removeClass('active'); 
     THIS.setState({state: true}); 

    }, 255);  

}, 

closeMenu: function() { 

    var THIS = this; 

    var $navIcon = $('#nav-icon'), 
     $menu = $('#menu'), 
     $html = $('html'), 
     $header = $('header'); 

    $menu.removeClass('active'); 
    $navIcon.removeClass('open'); 
    this.switchLogo(false); 

    setTimeout(function(){ 

     $menu.hide(); 
     $html.removeClass('fixed'); 
     THIS.setState({state: false}); 

     if ($(document).scrollTop() > 200) { 

      $header.addClass('active'); 

     } 

    }, 255); 

} 

}; 

--Nav Button--

var NavButton = React.createClass({ 
mixins:[logoSwitchlMixin, menuMixin], 
handleClick: function() { 

    console.log('handleClick -->' + this.state.state); 

    if (!this.state.state) { 

     this.openMenu(); 

    } 
    else { 

     this.closeMenu(); 

    } 

}, 
render: function() { 
    return (
     <button id="nav-button"> 
      <div id="nav-icon" onClick={this.handleClick} ref="icon"> 
       <span></span> 
       <span></span> 
       <span></span> 
      </div> 
     </button> 
    ) 
} 

}); 

- スライディングメニュー - ミックスインの概念は、コードが

var MainNav = React.createClass({ 

mixins:[logoSwitchlMixin, menuMixin], 
scroll: function(target) { 

    $('html, body').animate({ 

     scrollTop: $('#'+ target).offset().top 

    }, 600); 
}, 
scrollSection: function(e){ 

    e.preventDefault(); 
    this.scroll($(e.target).data('id')); 

}, 
render: function() { 
    return (
     <div id="menu" data-state="false"> 
      <div id="menu_wrapper"> 
       <nav> 
        <ul> 
         <li><a data-id="what" title="What We Do" alt="What We Do" onClick={this.scrollSection} >What We Do</a></li> 
         <li><a data-id="why" title="Why We Do It" alt="Why We Do It" onClick={this.scrollSection}>Why We Do It</a></li> 
         <li><a data-id="experiance" title="Our Experience" alt="Our Experience" onClick={this.scrollSection}>Our Experience</a></li> 
         <li><a data-id="how" title="How We Do It" alt="How We Do It" onClick={this.scrollSection}>How We Do It</a></li> 
         <li><a data-id="competence" title="Competence" alt="Competence" onClick={this.scrollSection}>Competence</a></li> 
         <li><a data-id="contact" title="Contact" alt="Contact" onClick={this.scrollSection}>Contact</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div onClick={this.closeMenu} id="shadow_blocker"></div> 
     </div> 
    ); 
} 

}); 
ReactDOM.render(
    <MainNav />, 
    document.getElementById('main-nav') 
); 

Answer 1

です再利用。複数のコンポーネントで同じコードを使用できます。それは部品に取り付けられており、部品の内部で使用されると

しかし、あなたはあなたのようなミックスインに設定された状態をカントはmenuMixin

とミックスインをした自動車部品やコンポーネントを参照してバインドされます（この）は反応によってmixin関数でautobindedになります。

ミックスインから状態を共有することはできません。しかし、dom要素などを参照することはできますが、stateは参照することはできません。また、適切に更新されるsetState（）メソッドを使用してコンポーネントの状態を変更することもできますが、状態はコンポーネント内に存在し、mixinでは存在しません。