[JavaScript知识库]实现一个简单的弹窗组件

弹框组件实现

一、写在前面

最近技术设计评审过程，架构师要求将其中一些共同的业务场景封装为组件，于是产生了这个组件，但是怎么说呢，API不算多，并且适用的场景也比较少，主要还是涉及的组件间传值可以看一下，也欢迎指出问题。

二、实现

import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import './index.less'
const Node = document.createElement("div")
const Drawer = (props) => {
    const [closeMantle, setCloseMantle] = useState(false)
    const [childName, setChildName] = useState(props.content[0])
    const [showCancel, setShowCancel] = useState(false)
    /* 点击蒙层关闭 */
    const closeModal = () => {
        if (props.maskClosable === true) setCloseMantle(props.maskClosable);
        else {
            setCloseMantle(false)
        }
    }
    const chooseName = (e, v) => {
        e.stopPropagation()
        props.onChange(v)
        setChildName(v)
        setCloseMantle(!closeMantle)
    }
    useEffect(() => {
        if (props.hideCancel == false) setShowCancel(false);
        else {
            setShowCancel(true)
        }
    }, [])
    const showMantle = () => {
        document.body.appendChild(Node)

        setCloseMantle(!closeMantle)
        // console.log('5648')
    }
    const onMiss = () => {
        props.onCancel()
    }
    return <span onTouchEnd={showMantle}>
        {props.children}
        {createPortal(<div className='modal-container' style={{ display: closeMantle ? '' : 'none' }} onTouchEnd={closeModal}>
            <div className={props.position === 'bottom' ? 'modal-babylist-bottom' : 'modal-babylist-top'}>
                {props.content.map((v, i) => {
                    return <div onTouchEnd={(e) => chooseName(e, v)} key={i} className={childName == v ? 'modal-baby modal-active-name-color' : 'modal-baby'}>{v}</div>
                })}
                <div className='modal-baby-cancel ' style={{ display: showCancel ? '' : 'none' }}><div className='modal-cancel' onTouchEnd={onMiss}>取消</div></div>
            </div>
        </div>, Node)}
    </span>

}
export default Drawer

在react中父子组件之间的传值，父传子通过props来进行接收，子传父的话通过回调函数来进行接收。另外对于一些样式的实现的话通过写入多个类名，设定某个样式对应的一些标识，只需要判别标识来进行展示不同样式，大概就这么多吧。
另外其中有一个Protal将创建的节点挂载到根节点下。