Reactjs анимирует покидающий компонент без использования аддона

Question

В response.js, я знаю, что анимация может быть выполнена с использованием аддона ReactCSSTransitionGroup. Как часть учебного процесса, я пытаюсь написать «vanilla js» для анимации компонента при входе и выходе.

Я придумал несколько простых кодов, как показано ниже, когда компонент ребенка установлен на входе

class Child extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { opacity: 0 } 
    } 
    componentDidMount() { 
    this.setState({ opacity: 1 }) // change the opacity when the component is mounted 
    } 
    render() { 
    <div style={{ transition: 'opacity 0.3s', opacity: this.state.opacity }}> 
     I am a child component 
    </div> 
    } 
} 

class Parent extends React.Component { 
    render() { 
    return this.props.someProp === true ? <Child /> : null 
    } 
} 

Однако, я изо всех сил о том, как оживить компонент на выходе. componentWillUnmount не работает с this.setState({ opacity: 0 }), потому что компонент будет удален. Я пробовал читать исходный код в ReactCSSTransitionGroup, но, похоже, не получил смысл. Может ли кто-нибудь предоставить простой пример кода, объясняющий, как должен быть реализован компонент при выходе?

Answer 1

Дело в том, что вы не можете справиться с этим из самого компонента. Вот почему вы можете использовать React-переходы для дочерних элементов компонента ReactCSSTransitionGroup. Это обрабатывается с использованием новых методов жизненного цикла, добавленные ReactTransitionGroup элемента, как указано в docs.

важный метод есть componentWillLeave(callback), который не будет удалить элемент из DOM непока обратного вызова вызывается. Поэтому, если вы хотите реализовать подобное поведение самостоятельно, вам нужно будет использовать аналогичный подход и создать некоторый компонент упаковки, который может обрабатывать жизненный цикл своих детей и, возможно, расширять его.