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

Question

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

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

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

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

更新

我尝试了一个新版本，其中我用自己的 TransitionWrapper class 包装每个单独的路线，如 this second gist (inspired by ).

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

Uncaught TypeError: Cannot read property 'componentWillAppear' of undefined

这会引发问题，因为 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）不能 connected 到 Redux 全局状态。如果需要的话，该组件本质上可以只是一个包装器，它呈现 另一个 连接到 Redux 状态的组件，因此 Home （例如）真的就在那里处理动画，它的子组件负责所有与数据相关的事情。

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

Getting ReactTransitionGroup and Redux-Simple-Router to work together

javascript

reactjs

react-router

redux

react-router-redux