Блог

Главная - Вопросы по программированию - Реагирующий компонент маршрутизатора не будет вызывать

Реагирующий компонент маршрутизатора не будет вызывать

#javascript #animation #reactjs #react-router #gsap

#javascript #Анимация #reactjs #реагирующий маршрутизатор #gsap

Вопрос:

Я пытаюсь анимировать страницы маршрутизатора react с TransitionGroup gsap помощью приложения и 

 class App extends React.Component {
    render() {
        return (
          <div>
            <ul>
              //links
            </ul>
              <div className="detail">
                <TransitionGroup component="div">
                  {this.props.children}
                </TransitionGroup>
              </div>
          </div>
        )
    }
}

Компонент страницы, componentDidMount вызывающий и анимирующий только действие, componentWillLeave не работает.

 class Page extends React.Component {
    componentDidMount() {
        // working
        var dom = ReactDOM.findDOMNode(this)
        TweenMax.fromTo(dom, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1})
    }
    render() {
        return (
          <div>
            Page
          </div>
        )
    }
    componentWillLeave() {
        // not working
        var dom = ReactDOM.findDOMNode(this)
        TweenMax.fromTo(dom, 0.3, {y: 0, opacity: 1}, {y: 100, opacity:0})
    }
}

Я новичок в react, у меня сложные анимации при загрузке и выходе каждой страницы, пожалуйста, помогите мне найти решение для устранения этой проблемы.

заранее спасибо.

Комментарии:

1. Вы уверены, что componentWillUnmount это не тот метод жизненного цикла, который вы ищете?

2. Я пробовал componentWillUnmount его запуск, но не поддерживает анимацию.

3. Я полагаю, что вы должны вызывать анимацию исчезновения из этого метода. Не возражаете ли вы изменить исходный вопрос на use componentWillUnmount ? Это немного упростит рассуждение

4. componentWillUnmount не работает с анимацией.

5. Так или иначе, componentWillLeave это не метод жизненного цикла, поэтому он не вызывается в соответствии со спецификациями: facebook.github.io/react/docs/component-specs.html