ReactTransitionGroup 不适用于 React-redux 连接组件 [英] ReactTransitionGroup doesn't works with React-redux connected component

问题描述

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

如果我使用 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

代码:

从'react'导入React；从'react-dom'导入{render}；从'react-redux'导入{Provider，connect}；从redux"导入 {createStore, compose, combineReducers};从 'react/lib/ReactTransitionGroup' 导入 TransitionGroup；//盒子组件class Box 扩展了 React.Component {componentWillEnter(回调){console.log('componentWillEnter');打回来();}componentWillLeave(回调){console.log('componentWillLeave');打回来();}使成为() {返回 
;}}//Boxe 连接组件const BoxContainer = connect(null, {})(Box);//应用组件类 App 扩展了 React.Component {状态 = {shouldShowBox: 真};切换框 = () =>{this.setState({shouldShowBox: !this.state.shouldShowBox});};使成为() {返回 (<div><过渡组>{this.state.shouldShowBox &&<BoxContainer/>}</TransitionGroup><button className="toggle-btn" onClick={this.toggleBox}>切换
);}}//减速器功能减速器(状态= []，动作){开关(动作.类型){默认:返回状态}}//店铺const store = createStore(reducer);//使成为使成为(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root'));

解决方案

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

Redux 的创建者 Dan Abramov 就问题说了这句话

<块引用>

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

我建议您:

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

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

要么按照您的建议编写自己的 connect() 包装器，要么使用更 React 友好的动画方法，例如https://github.com/chenglou/react-motion

I'm working on a bigger project but I created this short example to illustrate the problem.

If I use Box component, its works. It outputs in the console componentWillEnter and componentWillLeave when we click on the button.

If I use BoxContainer container, it doesn't work anymore. componentWillEnter and componentWillLeave special lifecycle hooks are not called.

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

Webpack build is done correctly, no errors in the console, but It outputs nothing.

I also tried with high-level API :ReactCSSTransitionGroup, and it works with Box and BoxContainer component. But I need to use the low-level API : ReactTransitionGroup.

Do you have an idea why it doesn't works when we use react-redux?

Version used :

• react : 15.0.2
• redux : 3.5.2
• react-redux : 4.4.5

Code :

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

解决方案

That is not supposed to work because connect wraps your component into a "connected" object, however, there are some workarounds like connect-with-transition-group

The creator of Redux, Dan Abramov, has said this about the issue

To be completely honest I don’t want to hardcode supports for transition groups into connect(). This is a very specific API that is not going to be the React animation API and acts more like an escape hatch until there are better solutions. The way it invokes instance methods on a nested instance does not align with React conceptual model very well.

I would suggest you to:

• Either write your own wrapper around connect() like you suggested

• Or use a more React-friendly approach to animations such as https://github.com/chenglou/react-motion

Either write your own wrapper around connect() like you suggested Or use a more React-friendly approach to animations such as https://github.com/chenglou/react-motion

这篇关于ReactTransitionGroup 不适用于 React-redux 连接组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！