Javascript “如何写作”；到期日；特别的？

我正试图编写一个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} />;
        }
    }

---

实际上，您实现了一个针对HOC用法的完美示例。你不能确定什么是从外面进来的道具

在本例中，外部

visible

属性通过

{…this.props}

覆盖

visbile={this.state.visible}

属性

快速修复（通过交换特性定义的顺序）：

。。。
返回；
...

---

另外，不要忘记正确处理计时器。您应该存储任何计时器，如果仍处于活动状态，请在

组件中取消它们将卸载
。否则，未安装的组件中仍在运行的计时器可能会导致抛出错误。
您实际上实现了一个针对HOC用法的完美示例。你不能确定什么是从外面进来的道具

在本例中，外部
visible
属性通过
{…this.props}
覆盖
visbile={this.state.visible}
属性

快速修复（通过交换特性定义的顺序）：

。。。
返回；
...

另外，不要忘记正确处理计时器。您应该存储任何计时器，如果仍处于活动状态，请在
组件中取消它们将卸载
。否则，未安装组件中仍在运行的计时器可能会导致抛出错误。
不要在
render（）
中使用这种逻辑，因为您不知道它会触发多少次。尝试使用
componentWillMount
，这将使它只运行一次。不要在
render（）
中使用这种逻辑，因为您不知道它将触发多少次。尝试使用
组件willmount
，这将使它只在工作时运行，谢谢。我感兴趣的是为什么这是“针对临时用途的完美示例”，以及实现我想要归档的行为的正确方法是什么。然后我需要单独处理每个组件中的过期吗？HOC非常好，你只需要对它们更小心一点。它成功了，谢谢。我感兴趣的是为什么这是“针对临时用途的完美示例”，以及实现我想要归档的行为的正确方法是什么。然后我需要单独处理每个组件中的过期吗？HOC很好，你只需要对它们更小心一点。
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} />;
        }
    }

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