Question

当用户点击按钮时，我弹出一个模态页面，它完美运行：

render() {
  return (
     <div>
         <section>
             <button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
         </section>
         <SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
             Text that appears inside the modal page
            <Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
         </SkyLight>
    </div>
)}

但我的目标是在用户第一次打开页面时自动打开模式。
我不想通过点击按钮打开模态页面

问题：

我可以使用IIFE（一个立即调用的函数表达式），以便在用户打开页面后立即打开模式吗？
我的方法是将布尔值设置为true。如果值设置为true，则打开模态

用于模态的库： https://github.com/marcio/react-skylight

Answer 1

我认为您正在寻找的是componentDidMount()生命周期方法：

componentDidMount() {
    this.refs.simpleDialog.show();
}

来自React docs：

安装组件后立即调用
componentDidMount()。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

欢迎结帐其他component lifecycle methods。

Answer 2

要在组件装载上打开模型，只需将isVisible设置为true

即可

<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">

如何在反应组件的返回功能中使用IIFE？

2 个答案: