登录
痛点:
经常会有弹出弹框的功能,弹框的内容我们经常会单独封装成一个组件,组件的内容和展示关闭,通过父组件传入所需要的数据和弹框状态的props来控制。
关键就是传入props数据,都需要在父组件中提前用 useState 声明好,在弹出前重新赋值,而声明和重新赋值的操作会很累赘。
尤其是,明明某些数据在这个页面本不需要声明的,可为了给弹框组件传props,偏偏还就需要声明一下的时候,尤其心烦。
还有就是,如果这个组件使用率比较高,每个引入弹框组件的父组件,都需要声明、赋值,那心里就更膈应了。。。使用率高的组件反到更招人膈应?很反常理好掰。
以下是常规的不友好的写法示范:
// 父组件
import React, { useState } from "react";
import ShowData from './ShowData'
export default function Page() {
// 声明一堆数据
const [show, setshow] = useState(false)
const [title, settitle] = useState('')
const [data, setdata] = useState(null)
const [userInfo, setuserInfo] = useState(null)
const [isOwner, setisOwner] = useState(null)
// 弹框打开时传入数据
function showData(_title, _data, _userInfo, _isOwner) {
settitle(_title)
setdata(_data)
setuserInfo(_userInfo)
setisOwner(_isOwner)
setshow(true)
}
// 弹框关闭
function onClose(success) {
setshow(false)
}
return (
<div>
<button onClick={showData}>展示弹框</button>
<ShowData
show={show}
onClose={onClose}
title={title}
data={data}
userInfo={userInfo}
isOwner={isOwner}
/>
</div>
)
}
// 封装弹框组件
import { Modal } from 'antd'
export default function ShowData(show, onClose, title, data, userInfo, isOwner) {
return (
<Modal
title={title}
open={show}
onCancel={() => onClose(false)}>
展示的内容,可能用到props传进来的数据们
</Modal>
)
}
可见,给弹框组件传入的props都需要在父组件声明一遍,很烦人。
解决方案:
依托于react的 Hooks 系统,我们使用 use 来封装弹框组件后就很友好了,把和弹框组件的交互,抽象成一个方法。
声明的操作都放在弹框组件中,因为弹框组件才是那些变量的使用者,父组件只用在调用弹出组件的方法时,把数据作为参数传进去就可以了:
// 父组件
import React from "react";
import useShowData from './useShowData'
export default function Page() {
const [show, ShowDataModal] = useShowData()
// 弹框打开
function showData(title, data, userInfo, isOwner) {
// 通过调用方法打开弹框,不用再声明这些变量了
show(onClose, title, data, userInfo, isOwner)
}
// 弹框关闭
function onClose(success) {
// 通过判断success,来判断弹框想做的时完成了,还是说只是关闭的弹框,自定义
}
return (
<div>
<button onClick={showData}>展示弹框</button>
{/* 此处需要把dom放进来 */}
{ShowDataModal}
</div>
)
}
// 封装弹框组件
import React, { useState, useRef } from "react";
import { Modal } from 'antd'
export default function useShowData() {
// 同样声明一堆数据,这些都是此组件要用到的
const [show, setshow] = useState(false)
const [title, settitle] = useState('')
const [data, setdata] = useState(null)
const [userInfo, setuserInfo] = useState(null)
const [isOwner, setisOwner] = useState(null)
// 使用 useRef 声明,这个方法会在弹框关闭时调用
const onClose = useRef(null)
// 展示弹框
function showModal(_onClose, _title, _data, _userInfo, _isOwner) {
// 从传入的参数中依次读取赋值,可以更友好的做值的检测处理
settitle(_title)
setdata(_data)
setuserInfo(_userInfo)
setisOwner(_isOwner)
// 赋值弹框被关闭的方法
onClose.current = _onClose
setshow(true)
}
return [showModal, (
<Modal
title={title}
open={show}
onCancel={() => onClose.current(false)}>
展示的内容,可能用到props传进来的数据们
</Modal>
)]
}