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

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文档 ：

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

随意检查其他组件生命周期方法 。

Answer 2

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

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