让 ReactTransitionGroup 和 Redux-Simple-Router 一起工作答案

【问题标题】：Getting ReactTransitionGroup and Redux-Simple-Router to work together让 ReactTransitionGroup 和 Redux-Simple-Router 一起工作
【发布时间】：2016-03-30 06:57:26
【问题描述】：

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

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

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

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

更新

我尝试了一个新版本，其中我用自己的TransitionWrapper 类包装了每个单独的路由，如this second gist（灵感来自this answer）。

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

当它扩展ReactTransitionGroup 时，我在ReactTransitionGroup 对象上的performAppear 方法的第99 行遇到错误，其sn-p 如下：

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 调试器以便跳过错误，该站点仍然可以正常工作。

【问题讨论】：

标签： javascript reactjs react-router redux react-router-redux

【解决方案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')
);

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

【讨论】：