Question

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

使用componentWillReceiveProps，我可以通过将this.setState包装在超时中并在此期间添加类来实现此目的。使用新的React 16.3 API，我看到is is recommended代替使用getDerivedStateFromProps。

由于getDerivedStateFromProps“应返回一个更新状态的对象，或者为null以指示新的props不需要任何状态更新，”（React docs）我希望该方法看起来像这样：

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

但这不起作用。 setTimeout <?php foreach ( $upsells as $upsell ) : ?> <?php $post_object = get_post( $upsell->get_id() ); setup_postdata( $GLOBALS['post'] =& $post_object ); ?> <?php endforeach; ?> <?php woocommerce_product_loop_end(); ?>没有返回值，但我想知道是否有更优雅的解决方案，而不是返回一个承诺。

Answer 1

您可以使用componentDidUpdate：

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

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

1 个答案: