Question

我正在使用React Router + Redux，当我尝试加载嵌套视图（嵌套视图在ReactTransitionGroup内）时，它正确加载但它不会触发任何特殊钩子，如'ComponentWillEnter'或'ComponentWillLeave ”。

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

我的路线是这样的

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

ListsA / ListsB

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

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

Answer 1

所以我昨晚也遇到了这个问题，而这就是我发现它能让它发挥作用。

首先是这种方法https://github.com/reactjs/react-redux/issues/101 您可以使用包装器来包装您的连接组件，该包装器处理特殊的生命周期功能并将props传递给您的连接组件。

或

你可以通过＆＃39; withRef＆＃39;标记以连接并从连接组件调用这些生命周期函数，然后调用组件生命周期函数。我把它包装成一个你可以放在连接前面的包。

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

React Router + Redux + Transition组不会触发特殊的生命周期挂钩

1 个答案: