Question

我正在将用HTML，CSS和jQuery制作的90％完整网站翻译成更具前瞻性的反应＆＃34;应用程序＆＃34;。我有一些非常基本的原则，我很难掌握 - 我真的很喜欢反应JSX语言，但很难处理我以前在jQuery中实现的重度UI操作。 / p>

让我习惯于从我网站上最简单的互动开始的概念 - 将鼠标悬停在菜单按钮上并部分显示侧面菜单（例如20px）。我的组件结构如下：

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包括＆＃39;汉堡包＆＃39;按钮和网站标题：

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

当＆＃34;＃menu-button＆＃34;我正在改变我在Baobab里面定义的状态树＆＃34; teaseMenu（）＆＃34;使用＆＃34; menuActions.isHovering（）＆＃34;。

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

我所挣扎的是，一旦我的stateTree中的变化受到影响，我不确定如何将这一变化的知识提供给依赖它的所有其他元素。例如，SideNav如何与＆＃34; MainNav＆＃34;完全无关。它的孩子＆＃34;＃menu-button＆＃34;意识到这种变化并相应改变它的状态？这将简单地在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);
        }

    },....

Answer 1

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变量执行。在你的情况下，你可能想要做一些更复杂的事情;）

因此，当您在this.props.onChange(true)中致电MainNav时，您的根应用将更新其状态，然后SideNav会收到this.props.showSomething，因为之前它是假的。通过这样做，您可以通过回调根App并处理新的道具来为子组件提供子组件来影响子组件之间的更改。

用猴面包树影响多个成分的状态

1 个答案: