Question

我的同事和我正试图在redux-simple-router元素中包装ReactTransitionGroup导航（我们已经工作了一段时间），以便可以在路由更改时调用其生命周期方法。我们尝试了很多版本，但还没有想出办法让它发挥作用。

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

最值得注意的是，我们每次都使用重新生成的密钥（例如，通过cloneElement）尝试使用React的history.createKey()方法，但无法在任何路径更改时触发生命周期方法

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

更新

我尝试过一个新版本，我在其中使用自己的TransitionWrapper类封装每个单独的路线，如this second gist（受this answer启发）。

当TransitionWrapper扩展React.Component时（如示例中所示），调用render方法，但没有其他方法。该网站工作正常（但我无法访问转换挂钩）。

当它延伸ReactTransitionGroup时，我在performAppear对象的ReactTransitionGroup方法的第99行上遇到了错误，其片段如下：

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

未捕获的TypeError：无法读取属性＆＃39; componentWillAppear＆＃39;未定义的

因为this.refs是一个空对象而被提升了。（key是正确的）。

值得注意的是，如果我关闭Chrome调试器以便跳过该错误，该网站仍能正常运行。

Answer 1

我们的解决方案是创建一个返回另一个函数的函数，该函数又返回包含在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 global州。如果需要，该组件基本上只是一个包装器，它呈现连接到Redux状态的另一个组件，因此Home（例如）实际上只是处理动画，它的子组件负责处理与数据相关的所有事情。

让ReactTransitionGroup和Redux-Simple-Router协同工作

1 个答案: