javascript - "Expire in"HOC怎么写？

Question

我正在尝试编写一个 HOC，在一段时间后将其状态属性 visible 更改为 false。

这是我到目前为止所得到的:

const withExpire = (WrappedComponent) => 
    class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                visible: props.visible,
            };
        }

        render() {
            const expire_in = this.props.expire_in || 3000;
            if (this.state.visible) {
                setTimeout(() => {
                    this.setState({ visible: false });
                }, 1000);
            }
            return <WrappedComponent visible={this.state.visible} {...this.props} />;
        }
    }

我已经检查了 if (this.state.visible) 中的代码运行，但它不会更改我的 visible 属性。

有人可以解释一下我错过了什么吗？

编辑

解决方案:

const withExpire = (WrappedComponent) => 
    class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                visible: props.visible,
            };
            this.timeoutID = null;
        }

        componentWillMount () {
            const expire_in = this.props.expire_in || 3000;
            if (this.state.visible) {
                this.timeoutID = setTimeout(() => {
                    this.setState({ visible: false });
                }, expire_in);
            }
        }

        componentWillUnmount () {
            if (this.timeoutID) {
                window.clearTimeout(this.timeoutID);
            }
        }

        render () {
            return <WrappedComponent {...this.props} visible={this.state.visible} />;
        }
    }

Answer 1

您实际上实现了针对 HOC 使用的完美示例。您无法确定从外部作为 Prop 传入的内容是什么。

在此示例中，外部 visible 属性通过 {...this.props} 覆盖 visbile={this.state.visible} 属性(property)。

快速修复(通过交换属性定义的顺序):

...
return <WrappedComponent {...this.props} visible={this.state.visible} />;
...

另外，不要忘记正确处理计时器。您应该存储所有计时器，如果仍处于事件状态，请在 componentWillUnmount 中取消它们。否则，未安装的组件中仍在运行的计时器可能会导致抛出错误。