2

我和我的同事正在尝试将redux-simple-router导航（我们已经工作了一段时间）包装在一个ReactTransitionGroup元素中，以便可以在路线更改时调用其生命周期方法。我们已经尝试了一大堆版本，但还没有找到让它工作的方法。

我们当前的迭代在ReactTransitionGroup( 的子级Provider) 下创建了一个包装器，以便可以在路由状态和子级都可以访问的地方定义生命周期方法。这个包装器的渲染和componentWillAppear方法肯定会在初始应用程序加载时（在浏览器中）调用，但在应用程序的页面之间导航（使用 Redux 简单路由器）时不会调用。该代码或多或少都在此要点上。

最值得注意的是，我们每次都尝试使用cloneElementReact 中的方法使用重新生成的键（例如 through history.createKey()），但无法让生命周期方法在任何路由更改时触发。

ReactTransitionGroup将简单路由器组件包装在with中的惯用方式是redux-simple-router什么？

更新

我尝试了一个新版本，在其中我用自己的TransitionWrapper类包装每个单独的路线，如第二个要点（受此答案启发）。

当它TransitionWrapper扩展时React.Component（如示例中所示），该render方法被调用，但没有别的。该站点运行良好（但我无法访问转换挂钩）。

当它 extends 时，我在对象上的方法的ReactTransitionGroup第 99 行遇到了一个错误，其中的一个片段如下：performAppearReactTransitionGroup

performAppear: function (key) {
  this.currentlyTransitioningKeys[key] = true;

  var component = this.refs[key];

  if (component.componentWillAppear) { /* error here */
    component.componentWillAppear(this._handleDoneAppearing.bind(this, key));
  } else {
    this._handleDoneAppearing(key);
  }

未捕获的类型错误：无法读取未定义的属性“componentWillAppear”

这被提出来了，因为this.refs它是一个空对象。（key是正确的）。

值得注意的是，如果我关闭 Chrome 调试器以便跳过错误，该站点仍然可以正常工作。

4

1 回答 1

0

我们的解决方案是创建一个返回另一个函数的函数，该函数又返回包装在ReactTransitionGroup.

var transitionWrap = (component, myKey) => {
  return () => {
    return ( 
      <ReactTransitionGroup>
        { React.createElement(component, { key: myKey } ) }
      </ReactTransitionGroup>
    )
  }
}

const routeConfig = [
  {
    path: "/",
    component: AppContainer,
    childRoutes: [
      { path: "/signed-out",
        component: LoggedOut,
        childRoutes: [
          { path: "/home", component: transitionWrap(Home, browserHistory.createKey())                            }
        ]
      }
    ]
  }
];

ReactDOM.render(
  <div>
    <Provider store={store}>
      <Router history={browserHistory} routes={routeConfig} />
    </Provider>
  </div>,
  document.getElementById('app')
);

完美运行（允许组件访问 Transition Group 方法），但有一个例外——子组件（即Home）不能被connect编辑为 Redux 全局状态。如果需要，该组件本质上可以只是一个包装器，它呈现连接到 Redux 状态的另一个组件，因此Home（例如）实际上只是用来处理动画，它的子组件负责所有与数据相关的事情。

于 2016-02-09T18:22:18.630 回答