条件渲染组件之间的 React 转换答案

【问题标题】：React Transition Between Conditionally Rendered Components条件渲染组件之间的 React 转换
【发布时间】：2020-04-03 03:49:43
【问题描述】：

当我单击它们时，我试图在 3 个有条件渲染的组件之间进行转换。我试图通过使用react-transition-group 中的TransitionGroup 来实现这一点。这是我目前所拥有的：

<div className="transitionContainer">
        <Transition in={this.state.validFiles && this.state.dotted} timeout={duration}>
          {state => (
            <>
              {this.state.validFiles && this.state.dotted ? (
                <div className={`col fade fade-${state}`} onClick={this._handleDotted}>
                  <DottedPortrait state={this.state} />
                </div>
              ) : null}
            </>
          )}
        </Transition>
        <Transition in={this.state.validFiles && this.state.square} timeout={duration}>
          {state => (
            <>
              {this.state.validFiles && this.state.square ? (
                <div className={`col fade fade-${state}`} onClick={this._handleSquare}>
                  <SquaredPortrait state={this.state} />
                </div>
              ) : null}
            </>
          )}
        </Transition>
        <Transition in={this.state.validFiles && this.state.line} timeout={duration}>
          {state => (
            <>
              {this.state.validFiles && this.state.line ? (
                <div className={`col fade fade-${state}`} onClick={this._handleLine}>
                  <LinePortrait state={this.state} />
                </div>
              ) : null}
            </>
          )}
        </Transition>
      </div>

虽然此代码适用于每个条件渲染的进入状态，但退出动画并不是因为在转换组可以应用 exiting 和 exited 类之前卸载组件。解决这个问题的最佳方法是什么？

以下是这些组件的handle 函数：

handleValidFiles = () => {
console.log(this.state);
this.setState({
  validFiles: true,
  dotted: true,
  square: false,
  line: false
 });
};
_handleDotted = () => {
console.log(this.state);
this.setState({
  dotted: !this.state.dotted,
  square: !this.state.square
});
};

_handleSquare = () => {
console.log(this.state);
this.setState({
  square: !this.state.square,
  line: !this.state.line
});
};

_handleLine = () => {
console.log(this.state);
this.setState({
  line: !this.state.line,
  dotted: !this.state.dotted
});
};

【问题讨论】：

不明白你的意思，看看这个codesandbox
@iamhuynq 谢谢。我认为沙箱工作的原因是因为您没有有条件地安装和卸载组件，这就是我正在努力解决的问题。我已经让进入动画在点击时工作，但退出动画不起作用，因为组件在退出类可以应用之前卸载。我想知道在转换完成后如何卸载，必须编写更多函数

标签： reactjs react-transition-group reactcsstransitiongroup

【解决方案1】：

想通了，尽管这绝对不是一个优雅的解决方案。问题是，当我应该使用 TransitionGroup 渲染组件时，我有条件地在 TransitionGroup 内渲染组件。

<Transition
          in={this.state.validFiles && this.state.dotted}
          unmountOnExit
          onExited={this._handleToSquare}
          timeout={duration}
        >
          {state => (
            <div className={`col fade fade-${state}`} onClick={this._handleDotted}>
              <DottedPortrait state={this.state} />
            </div>
          )}
        </Transition>
        <Transition
          in={this.state.validFiles && this.state.square}
          unmountOnExit
          onExited={this._handleToLine}
          timeout={duration}
        >
          {state => (
            <div className={`col fade fade-${state}`} onClick={this._handleSquare}>
              <SquaredPortrait state={this.state} />
            </div>
          )}
        </Transition>
        <Transition
          in={this.state.validFiles && this.state.line}
          onExited={this._handleToDotted}
          unmountOnExit
          timeout={duration}
        >
          {state => (
            <div className={`col fade fade-${state}`} onClick={this._handleLine}>
              <LinePortrait state={this.state} />
            </div>
          )}
        </Transition>

处理完之后，我还需要 onExited 回调函数来触发下一个组件的渲染。注意 onExit 属性上的 _handleTo[xxxx] 方法。

【讨论】：