React 自定义弹框

[sanlangguo]

前沿

弹框在我们平时业务开发过程中最常用的到一种场景。因此记录一下，方便下次直接使用

如何创建

• page.js 页面

  
  版本 React 17.02

// src/views/page.js

import React, { useState } from "react"; import ModelToast from '../../components/ModelToast/index.js';

const Page = () => { const [data, setData] = useState({ name: '我是弹框', visible: false })

function openToast() {
    console.log(222)
    setData({
        name: '我是弹框',
        visible: true
    })
}

/**
 * params {a} 回调参数，根据业务场景抉择是否需要
 */
function handleOk(a) {
    setData({
        visible: false
    })
    console.log(a, 'handleOk')
}

function handleCancel() {
    setData({
        visible: false
    })
    console.log('handlhandleCanceleOk')
}

return (<>
    {data.visible && <ModelToast data={data} handleOk={handleOk} handleCancel={handleCancel}/>}
    <button onClick={openToast}>弹框</button>
</>)

}

export default Page;

*  ModelToast 弹框组件

// src/components/ModelToast/index.js

import React from "react"; import ReactDOM from 'react-dom'

const ModelToast = (props) => { console.log(props, 'props') return props.data.visible ? ReactDOM.createPortal(

{props.data.name}

    <button onClick={() => props.handleCancel()}>取消</button>
    <button onClick={() => props.handleOk(2)}>确认</button>
</div>
    , document.body) : null

}

export default ModelToast