React18-完成弹窗封装

原创

已于 2024-01-31 02:18:49 修改 · 906 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

于 2024-01-31 02:17:52 首次发布

弹框封装

用法

// 创建
userRef.current?.open('create')
// 修改
userRef.current?.open('edit',values)

{
   
   /* 创建用户 */}
<CreateUser mRef={
   
   userRef} update={
   
   } />

组件暴露open方法

文档地址：https://react.dev/reference/react/useImperativeHandle

useImperativeHandle(ref, createHandle, dependencies?)

方法一：ref + forwardRef + useImperativeHandle

// 父组件 OrderList
import React, { useEffect, useRef, useState } from 'react'

export default () => {
    const userRef = useRef()

    const handleOpen = () => {
        userRef.current?.open()
    }
    return <CreateUser