javascript - 如何在 React 组件的返回函数中使用 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(一个立即调用的函数表达式)以便在用户打开页面时立即打开模式吗？

• 我的方法是将 bool 值设置为 true。如果该值设置为 true，则打开模态

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

Answer 1

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

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

来自React docs :

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

请随时查看其他 component lifecycle methods .