函数什么时候写在组件内部，什么时候写在页面里
来源：6-9 创建页面组合展示型组件
给生活一个大大的傻笑
2021-03-03
老师，不清楚什么时候函数要写在组件内部，什么时候写在全局页面里面
- 我想想了是如果依赖全局的state，需要写在全局页面中，不知道对不对？
- 假如我现在有个弹窗组件， 又有多个按钮功能组件（关机、删除），这两个按钮点击都需要弹窗，所以需要加一个全局的弹窗状态state， 然后通过全局页面向按钮传函数。
- 不知道这样对不对, 或者老师是怎么处理的，方便贴个简短代码吗
- <DeleteBtn handleClick={ ()=> { this.setState({ modal: true }) } } />
<ShutdownBtn handleClick={ ()=> { this.setState({ modal: true }) } } />
写回答
1回答
-
同学你好
请记住自上而下的数据流就好，弹窗组件有多种解法，这里我们说一个最简单的做法。在父组件中管理弹窗的状态。你的思路是大体中缺的，以下是伪代码 请自己修改一下
// 父组件添加一个状态 state: { isOpen: false } // 点击按钮的时候显示弹窗 <DeleteBtn handleClick={openModal}> openModal: this.setState({isOpen: true}) // 在界面上显示弹窗 { isOpen && <Modal />} // 在弹窗组件(注意这里是子组件)中点击某个关闭按钮发送事件 closeModal: this.props.onClose() // 在父组件中添加这个响应，并且处理 <Modal onClose={() => {this.setState({isOpen: false})}}>112021-03-09
相似问题