如何将React的getDerivedStateFromProps与setTimeout一起使用？

Question

我想创建一个类似Modal的组件,它接收一个打开/关闭的布尔值作为prop,然后将该值存储在组件状态中.关闭Modal时,我想更新close布尔prop,但是在更新组件状态之前等待几秒钟,这样我就可以添加转换类并为退出设置动画.

有了componentWillReceiveProps,我可以通过包装this.setState超时并在此期间添加类来完成此操作.使用新的React 16.3 API,我发现建议使用它getDerivedStateFromProps.

因为getDerivedStateFromProps"应该返回一个对象来更新状态,或者为了指示新的道具不需要任何状态更新",(React docs)我希望该方法看起来像这样:

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

但这不起作用.我已经读过,setTimeout它没有返回值,但我想知道是否有一个更优雅的解决方案,而不是返回一个承诺.

Answer 1

你可以使用componentDidUpdate:

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