如何使用React的getDerivedStateFromProps和SetTimeout？

Question

我想创建一个类似于模态的组件，它接收一个打开/关闭的布尔值作为道具，然后将该值存储在组件状态中。当关闭模态时，我想要更新close boolean prop，但在更新组件状态之前等待几秒钟，以便我可以添加过渡类和动画退出。

使用ComponentWillReceiveProps，我可以通过在超时中包装this.SetState并同时添加类来实现这一点。对于新的React 16.3 API，我发现建议使用GetDerivedStateFromProps。

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

但那不起作用。我读到settimeout不返回值，但我想知道是否有比返回promise更好的解决方案。

Answer 1

您可以使用componentdidupdate:

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