Как использовать React getDerivedStateFromProps с setTimeout? - PullRequest
Новая
       5

Как использовать React getDerivedStateFromProps с setTimeout?

0 голосов
/ 01 мая 2018

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

С componentWillReceiveProps я мог бы сделать это, обернув this.setState в тайм-аут и добавив классы между тем. С новым API React 16.3 я вижу, что рекомендуется вместо getDerivedStateFromProps.

Так как getDerivedStateFromProps "должен возвращать объект для обновления состояния, или ноль, чтобы указать, что новые реквизиты не требуют никаких обновлений состояния", ( React docs ) Я хочу, чтобы метод выглядел примерно так это: 

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.menuIsOpen === false && prevState.menuIsOpen === true) {
        return setTimeout(() => { menuIsOpen: false}, 1000);
    }
    return null;
}

Но это не работает. Я прочитал , что setTimeout не возвращает значение, но мне интересно, есть ли более элегантное решение проблемы, чем возвращение обещания.

1 Ответ

0 голосов
/ 01 мая 2018

Вы можете использовать componentDidUpdate: 

componentDidUpdate(prevProps){
    // update your class names...
    if (!this.props.menuIsOpen && this.state.menuIsOpen) {
        setTimeout(() => this.setState({ menuIsOpen: false}), 1000);
    }
}
...