Question

我对React JS的整个世界都很陌生。我有两个组件通过mixin共享功能。它处理一个打开和关闭的菜单..当我单击按钮并且状态变为true和false时，它工作正常。在第二个组件内部，我想使用close函数在单击阴影元素时关闭菜单。调用close函数后状态更新。但是当点击按钮打开菜单时，状态仍为假..

有什么想法吗？

--- ---密新

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);

}

};

- 导航按钮 -

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

mixins的概念是代码重用。相同的代码可以与多个组件一起使用。

但你不能像使用menuMixin

那样设置mixins的状态

一旦将mixin连接到组件上并在组件内部使用，它将与组件自动绑定，并且组件（this）的引用将通过反应自动进行mixin功能。

所以你无法从mixin中分享状态。但是你可以引用dom元素等等而不是状态。您还可以通过setState（）方法修改组件状态，该方法将正确更新，但状态应该存在于组件中而不是混合中。

ReactJs Mixin不更新/共享状态

1 个答案: