ReactTransitionGroup 不适用于 React-redux 连接组件答案

【问题标题】：ReactTransitionGroup doesn't works with React-redux connected componentReactTransitionGroup 不适用于 React-redux 连接组件
【发布时间】：2016-05-07 18:20:54
【问题描述】：

我正在做一个更大的项目，但我创建了这个简短的示例来说明问题。

如果我使用Box 组件，它可以工作。它在控制台中输出componentWillEnter 和 componentWillLeave 当我们点击按钮时。

如果我使用BoxContainer 容器，它就不再起作用了。不调用 componentWillEnter 和 componentWillLeave 特殊的生命周期钩子。

{this.state.shouldShowBox && <BoxContainer/>}

Webpack 构建已正确完成，控制台中没有错误，但它什么也没输出。

我还尝试使用高级 API :ReactCSSTransitionGroup，它适用于 Box 和 BoxContainer 组件。但我需要使用低级 API：ReactTransitionGroup。

您知道为什么我们使用react-redux 时它不起作用吗？

使用的版本：

反应：15.0.2
redux : 3.5.2
react-redux：4.4.5

代码：

import React from 'react';
import {render} from 'react-dom';
import {Provider, connect} from 'react-redux';
import {createStore, compose, combineReducers} from 'redux';
import TransitionGroup from 'react/lib/ReactTransitionGroup';

// Box component
class Box extends React.Component {
  componentWillEnter(callback) {
    console.log('componentWillEnter');
    callback();
  }

  componentWillLeave(callback) {
    console.log('componentWillLeave');
    callback();
  }

  render() {
    return <div className="box"/>;
  }
}

// Boxe connected component
const BoxContainer = connect(null, {})(Box);

// App component
class App extends React.Component {
  state = {
    shouldShowBox: true
  };

  toggleBox = () => {
    this.setState({
      shouldShowBox: !this.state.shouldShowBox
    });
  };

  render() {
    return (
      <div>
        <TransitionGroup>
          {this.state.shouldShowBox && <BoxContainer/>}
        </TransitionGroup>
        <button className="toggle-btn" onClick={this.toggleBox}>
          toggle
        </button>
      </div>
    );
  }
}

// reducer
function reducer(state = [], action) {
  switch (action.type) {
    default:
      return state
  }
}

// store
const store = createStore(reducer);

// render
render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
);

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

这应该不起作用，因为 connect 将您的组件包装到“连接”对象中，但是，有一些解决方法，例如 connect-with-transition-group

Redux 的创建者 Dan Abramov 曾说过 issue

老实说，我不想硬编码支持将组转换为 connect()。这是一个非常具体的 API 不会成为 React 动画 API，更像是一种逃避孵化直到有更好的解决方案。它调用实例的方式嵌套实例上的方法与 React 概念不一致模型很好。

我建议你：

要么按照你的建议编写自己的 connect() 包装器

或者对动画使用更 React 友好的方法，例如 https://github.com/chenglou/react-motion

要么像你建议的那样在 connect() 周围编写你自己的包装器，要么对动画使用对 React 更友好的方法，例如 https://github.com/chenglou/react-motion

【讨论】：

【解决方案2】：

我们也尝试做同样的事情，将TransitionGroup 与redux 连接的组件连接起来，比如

<TransitionGroup>
  layerIds.map(id => ( <Layer ...>))
</TransitionGroup>

Layer 本身就是一个连接的 redux 组件。

我们也尝试将Layer 自己包裹起来

const WrappedLayer = (props) =>{
  return <TransitionGroup>
  <Layer {...props}/>
  </TransitionGroup>
}

并使用WrappedLayer连接它，它只会在像componentWillAppear和componentDidAppear这样的安装阶段起作用，在卸载阶段不起作用，因为当你在UI上删除一个层时，TransitionGroup也会被删除，则永远不会触发componentWillLeave 这样的生命周期方法。

好消息是我们终于找到了一个非常方便的库react-movehttps://github.com/react-tools/react-move，我们认为它比react-motion更好，因为我们可以自定义持续时间，动画曲线，而且非常干净。

希望对您有所帮助，如果您在使用react-move 时遇到任何问题，请私信我。

【讨论】：