函数什么时候写在组件内部，什么时候写在页面里

Question

老师，不清楚什么时候函数要写在组件内部，什么时候写在全局页面里面

1. 我想想了是如果依赖全局的state，需要写在全局页面中，不知道对不对？
2. 假如我现在有个弹窗组件， 又有多个按钮功能组件（关机、删除），这两个按钮点击都需要弹窗，所以需要加一个全局的弹窗状态state， 然后通过全局页面向按钮传函数。
3. 不知道这样对不对, 或者老师是怎么处理的，方便贴个简短代码吗

2. <DeleteBtn handleClick={ ()=> { this.setState({ modal: true }) } } />
   <ShutdownBtn handleClick={ ()=> { this.setState({ modal: true }) } } />

Answer 1

张轩 2021-03-05 12:05:44

同学你好 

请记住自上而下的数据流就好，弹窗组件有多种解法，这里我们说一个最简单的做法。在父组件中管理弹窗的状态。你的思路是大体中缺的，以下是伪代码 请自己修改一下

// 父组件添加一个状态
state: { isOpen: false }
// 点击按钮的时候显示弹窗
<DeleteBtn handleClick={openModal}>
openModal: this.setState({isOpen: true})
// 在界面上显示弹窗
{ isOpen && <Modal />}
// 在弹窗组件(注意这里是子组件)中点击某个关闭按钮发送事件
closeModal: this.props.onClose()
// 在父组件中添加这个响应，并且处理
<Modal onClose={() => {this.setState({isOpen: false})}}>

• 提问者 给生活一个大大的傻笑 #1

  非常感谢！