Реакция перехода между условно отображаемыми компонентами - PullRequest
Новая
       29

Реакция перехода между условно отображаемыми компонентами

0 голосов
/ 02 апреля 2020

Я пытаюсь перейти между 3 условно отображаемыми компонентами, когда нажимаю на них. Я пытаюсь добиться этого с помощью TransitionGroup из react-transition-group. Это то, что у меня есть до сих пор: 

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

1 Ответ

0 голосов
/ 02 апреля 2020

Разобрался, хотя это определенно не изящное решение. Проблема заключалась в том, что я выполнял условное рендеринг компонентов внутри 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 для запуска рендеринга. следующего компонента. Обратите внимание на методы _handleTo [xxxx] в подпорке onExit.

...