Question

我有一些基于特定状态可选动画的组件。例如，与移动应用程序一样，如果侧边栏处于打开状态并且您点击侧边栏中的导航项目，我们不会在面板之间执行滑动动画，但如果关闭并点击链接，则会滑动面板。 “面板”是页面。现在的代码看起来像：

  render: function () {
    var appContent;
    if (this.state.sidebarOpen) {
      appContent = <div className="app-content">
                     <this.props.activeRouteHandler ref="route" />
                   </div>
    }
    else {
      appContent = <CSSTransitionGroup component={React.DOM.div}
                      className="app-content"
                      transitionName="pane-animate">
                     <this.props.activeRouteHandler ref="route" />
                   </CSSTransitionGroup>
    }
    return (
      <div className="wrapper">
        <Sidebar closeHandler={this.sidebarCloseHandler} ref="sidebar" />
        <div className="inner-wrapper">
          {appContent}
        </div>
      </div>
    );
  },

如果/或其他只是更改，如果该部分应该动画，那么当他们进入并查看它时，对其他开发人员来说似乎很粗糙和混乱。这有更好的模式吗？

Answer 1

这会有用吗？

使用React v0.12中的JSX点差。

var CSSTransitionIf = React.createClass({
  render: function() {
    if (this.props.test) {
      return <CSSTransitionGroup {...this.props}>{this.props.children}</CSSTransitionGroup>
    }
    else {
      var component = this.props.component
      return <component className={this.props.className}>{this.props.children}</component>
    }
  }
})

//...

  render: function () {
    return <div className="wrapper">
      <Sidebar closeHandler={this.sidebarCloseHandler} ref="sidebar" />
      <div className="inner-wrapper">
        <CSSTransitionIf test={!this.state.sidebarOpen} component={React.DOM.div}
           className="app-content"
           transitionName="pane-animate">
          <this.props.activeRouteHandler ref="route" />
        </CSSTransitionIf>            
      </div>
    </div>
  },

// ...

当您为某些组件设置动画时，可以使用React模式

1 个答案: