react-transition-group CSSTransition，以null为条件答案

【问题标题】：react-transition-group CSSTransition, conditional with nullreact-transition-group CSSTransition，以null为条件
【发布时间】：2019-07-28 12:14:42
【问题描述】：

试图让一个简单的淡入/淡出过渡工作。

我尝试将<CSSTransition> 移动到不同的区域，但无济于事。我在另一个映射子组件的组件中成功地使用了它，但不明白为什么它在这种情况下不起作用，因为我将它与子组件一起渲染，如果子组件被返回的话。

子组件

const Error = (props) => {
  return (
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  )
}

父组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';

import type { InfoState } from './state';
import { closeError } from './actions';

const mapStateToProps = (state: {info: InfoState}) => ({
  info: state.info.data.info,
  infoError: state.info.infoError,
});

const mapDispatchToProps = dispatch => ({
  closeError: () => dispatch(closeError()),
});

class Parent extends Component<Props, State> {
  state = { info: this.props.info };

  handleChange = (e) => {
    this.setState({ info: e.target.value });
    this.props.closeError();
  }

  render() {
    if (this.props.info === null) {
      return (
        <div className="info-wrapper">
          <input
            type="text"
            value={this.state.info ? this.state.info : '' }
            onChange={this.handleChange}
          />
        </div>
        <div className="info-error">
          { this.props.infoError !== ''
            ? <Error 
                key={this.state.info} 
                errorString={this.props.infoError} 
              />
            : null
           }
        </div>
      )
    }
    return ( <div> things </div> )
  }
}

CSS

.errorTransition-enter {
  opacity: 0.01;
}
.errorTransition-enter-active {
  opacity: 1;
  transition: all 400ms ease-out;
}
.errorTransition-exit {
  opacity: 1;
}
.errorTransition-exit-active {
  opacity: 0.01;
  transition: all 400ms ease-out;
}

【问题讨论】：

您能分享组件内的所有内容吗？谢谢。
你确定这个条件：this.props.infoError !== ' ' 返回真吗？
@ladyk 是的！我每次都正确地捕捉到错误
所以我认为您没有在 CSSTransition 中传递 'in' 参数，请看示例：reactcommunity.org/react-transition-group/css-transition/…
@ladyk 我也试过了，所以我有in={ props.errorString !== '' }，但仍然没有过渡

标签： reactjs css-transitions react-transition-group

【解决方案1】：

我在有条件地删除用<CSSTransition> 包裹的元素时遇到了类似的问题。为了解决这个问题，我用<TransitionGroup> 元素包裹了<CSSTransition> 元素并使用了它的childFactory 属性。 childFactory 属性可以这样使用：

  <TransitionGroup
     childFactory={child => React.cloneElement(child)}
  >
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  </TransitionGroup>

【讨论】：