React插槽之模态框

最新推荐文章于 2024-08-23 10:50:15 发布

Miketutu

最新推荐文章于 2024-08-23 10:50:15 发布

阅读量129

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Miketutu/article/details/130441215

版权

文章展示了在React中如何创建和管理Dialog组件，利用useState保存状态，并通过useEffect监听props变化来更新组件显示。点击按钮触发Dialog显示，Dialog包含确认和取消操作，点击后更新父组件状态。

摘要由CSDN通过智能技术生成

import React, { useState } from 'react'
import Dialog from './components/Dialog'
export default function App() {
 const [show,setShow]  = useState(false)
 let update  =()=>{
  setShow(false)
 }
  return (
    <div>
      <button onClick={()=>{
        setShow(true)
      }}>+新增</button>
      <Dialog visisable={show} onUpdate={update}>
        <p>新增用户</p>
      </Dialog>
    </div>
  )
}

import React, { useEffect, useState } from 'react'
import '../assets/css/dialog.scss'
export default function Dialog(props) {
    const {children,visisable,onUpdate} = props
    const [show,setShow] = useState(visisable)
    const confirm = ()=>{
        setShow(false)
        onUpdate()
    }

    useEffect(()=>{
        setShow(visisable)
    },[visisable]) 

    const cancel = ()=>{
        setShow(false)  
        onUpdate()    
    }
    if(show){
        return (
            <div className='dialog'>
                <div className="dialog-center">
                    {/* 标题 */}
                    <p>{children}</p>
                    <div>内容</div>
                    <div>
                        <button onClick={confirm}>确定</button>
                        <button  onClick={cancel}>取消</button>
                    </div>
                </div>
            </div>
          )
    }else{
        return null
    }
  
}

注意：

子组件接收到值之后，用useState保存，二次编译后，useState会将第一次编译保存的值作为默认值，所以props值发生变化时，我们需要让useState知道props中的visisable已经发生改变了，所以就需要useEffect来监控props中的值并且调用setState。