让ReactTransitionGroup和Redux Simple Router协同工作

Getting ReactTransitionGroup and Redux-Simple-Router to work together

本文关键字：Router 协同工作 Simple Redux ReactTransitionGroup      更新时间：2023-09-26

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

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

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

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

更新

我尝试了一个新版本，在这个版本中，我用自己的TransitionWrapper类来包装每个单独的路由，就像第二个要点中一样（受这个答案的启发）。

当TransitionWrapper扩展React.Component时（如示例中所示），将调用render方法，但不调用其他方法。该网站运行良好（但我无法访问过渡挂钩）。

当它扩展ReactTransitionGroup时，我在ReactTransitionGroup对象上的performAppear方法的第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);
  }

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

这是因为this.refs是一个空对象。（key正确）。

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

我们的解决方案是创建一个返回的函数，另一个函数反过来返回封装在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')
);

工作正常（允许组件访问过渡组方法），但有一个例外——子组件（即Home）不能被connect设置为Redux全局状态。如果需要的话，该组件本质上可以只是一个包装器，用于呈现另一个连接到Redux状态的组件，因此Home（例如）实际上只是用来处理动画的，其子组件负责处理与数据相关的所有内容。

相关文章：