React Router + Redux +转换组不触发特殊生命周期挂钩

Question

我正在使用React Router + Redux，当我试图加载一个嵌套视图(嵌套视图位于ReactTransitionGroup内部)时，它可以正确加载，但不会触发任何特殊的钩子，比如'ComponentWillEnter‘或'ComponentWillLeave’。

在添加Redux 'connects‘之前，它工作正常。

我的路线是这样的

<Route path="lists" component={Lists}>
        <Route path="listsA" component={ListsA}/>
        <Route path="listsB" component={ListsB}/>
 </Route>

我的组件

列表

@connect(..)
class Lists extends React.Component {
     ...
     render(){
        const { pathname } = this.props.location;
        const key = pathname.split('/') || 'Lists';
        const element = this.props.children || <div/>;
        const messages = this.props.messages;
        const elementToAnimate = React.cloneElement(element, { key, messages });

        return <div className="lists-wrapper">
            <div className="nested-views">
                <ReactTransitionGroup>
                    {elementToAnimate}
                </ReactTransitionGroup>
            </div>
        </div>
     }
}

列表A/列表B

@connect(..)
    class ListsA extends React.Component {
         ...
         render(){
            ...
          }
    }

我没有写太多的代码，因为我不确定问题在哪里，如果你需要我添加更多的代码，我会的。

Answer 1

所以我昨晚也经历了这个问题，这是我发现的让它工作的东西。

首先，有一种方法https://github.com/reactjs/react-redux/issues/101，可以用包装器包装连接组件，该包装器处理特殊的生命周期函数，并将道具传递给连接组件。

或

您可以传递'withRef‘标志来连接并从连接组件调用这些生命周期函数，然后让它们调用您的组件的生命周期函数。我把它打包成一个包，你可以把它放在connect前面。

// npm install --save connect-with-transition-group
// https://github.com/esayemm/connect-with-transition-group

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'
import connectWithTransitionGroup from 'connect-with-transition-group';

class Foo extends Component {
  // ...

  componentWillEnter(cb) {
    // this works!
    cb();
  }

  // ...
}

export default connectWithTransitionGroup(connect(
  mapStateToProps,
  null,
  null,
  // IMPORTANT: must pass this flag to react-redux/connect
  {
    withRef: true,
  }
)(Foo));