react antd confirm content list_React造轮系列：对话框组件 - Dialog 思路
React造輪系列：對話框組件 - Dialog 思路
對話框一般是我們點(diǎn)擊按鈕彈出的這么一個東西，主要類型有 Alter, Confirm 及 Modal, Modal 一般帶有半透明的黑色背景。當(dāng)然外觀可參考 AntD 或者 Framework 等。
確定 API
API 方面主要還是要參考同行，因?yàn)槿绻幸惶?#xff0c;別人想你用的UI框架時，你的 API 跟他之前常用的又不用，這樣就加大了入門門檻，所以API 盡量保持跟現(xiàn)有的差不多。
對話框除了提供顯示屬性外，還要有點(diǎn)擊確認(rèn)后的回放函數(shù)，如：
alert('你好').then(fn)confirm('確定？').then(fn)modal(組件名)實(shí)現(xiàn)
Dialog 源碼已經(jīng)上傳到這里(https://github.com/qq449245884/frank-react2-test)。
dialog/dialog.example.tsx, 這里 state ，生命周期使用 React 16.8 新出的 Hook，如果對 Hook 不熟悉可以先看官網(wǎng)文檔。
dialog/dialog.example.tsx
import React, {useState} from 'react'import Dialog from './dialog'export default function () { const [x, setX] = useState(false) return ( {setX(!x)}}>點(diǎn)擊 )}dialog/dialog.tsx
import React from 'react'interface Props { visible: boolean}const Dialog: React.FunctionComponent = (props) => { return ( props.visible ? dialog : null )}export default Dialog運(yùn)行效果
顯示內(nèi)容
上述還有問題，我們 dialog 在組件內(nèi)是寫死的，我們想的是直接通過組件內(nèi)包裹的內(nèi)容，如：
// dialog/dialog.example.tsx...hi...這樣寫，頁面上是不會顯示 hi 的，這里 children 屬性就派上用場了，我們需要在 dialog 組件中進(jìn)一步驟修改如下內(nèi)容：
// dialog/dialog.tsx...return ( props.visible ? {props.children} : null)...顯示遮罩
通常對話框會有一層遮罩，通常我們大都會這樣寫：
// dialog/dialog.tsx...props.visible ? {props.children} : null...這種結(jié)構(gòu)有個不好的地方就是點(diǎn)擊遮罩層的時候要關(guān)閉對話框，如果是用這種結(jié)構(gòu)，用戶點(diǎn)擊任何 div,都相當(dāng)于點(diǎn)擊遮罩層,所以最好要分開：
// dialog/dialog.tsx... {props.children} ...由于 React 要求最外層只能有一個元素, 所以我們多用了一個 div 包裹起來，但是這種方法無形之中多了個 div，所以可以使用 React 16 之后新出的 Fragment, Fragment 跟 vue 中的 template 一樣，它是不會渲染到頁面的。
import React, {Fragment} from 'react'import './dialog.scss';interface Props { visible: boolean}const Dialog: React.FunctionComponent = (props) => { return ( props.visible ? {props.children} : null )}export default Dialog完善頭部，內(nèi)容及底部
這里不多說，直接上代碼
import React, {Fragment} from 'react'import './dialog.scss';import {Icon} from '../index'interface Props { visible: boolean}const Dialog: React.FunctionComponent = (props) => { return ( props.visible ? 提示 {props.children} ok cancel : null )}export default Dialog從上述代碼我們可以發(fā)現(xiàn)我們寫樣式的名字時候，為了不被第三使用覆蓋，我們自定義了一個 fui-dialog前綴，在寫每個樣式名稱時，都要寫一遍，這樣顯然不太合理，萬一哪天我不用這個前綴時候，每個都要改一遍，所以我們需要一個方法來封裝。
咱們可能會寫這樣方法：
function scopedClass(name) { return `fui-dialog-${name}`}這樣寫不行，因?yàn)槲覀?name 可能不傳，這樣就會多出一個 -,所以需要進(jìn)一步的判斷：
function scopedClass(name) { return `fui-dialog-${name ? '-' + name : ''}`}那還有沒有更簡潔的方法，使用 filter 方法：
function scopedClass(name ?: string) { return ['fui-dialog', name].filter(Boolean).join('-')}調(diào)用方式如下：
... 提示 {props.children} ok cancel ...大家在想法，這樣寫是有問題，每個組件都寫一個函數(shù)嗎，如果 Icon 組件，我還需要寫一個fui-icon, 解決方法是把 前綴當(dāng)一個參數(shù)，如：
function scopedClass(name ?: string) { return ['fui-dialog', name].filter(Boolean).join('-')}調(diào)用方式如下：
className={scopedClass('fui-dialog', 'mask')}這樣寫，還不如直接寫樣式，這種方式是等于白寫了一個方法，那怎么辦？這就需要高階函數(shù)出場了。實(shí)現(xiàn)如下：
function scopeClassMaker(prefix: string) { return function (name ?: string) { return [prefix, name].filter(Boolean).join('-') }}const scopedClass = scopeClassMaker('fui-dialog')scopeClassMaker 函數(shù)是高級函數(shù)，返回一個帶了 prefix 參數(shù)的函數(shù)。
事件處理
在寫事件處理之前，我們 Dialog 需要接收一個 buttons 屬性，就是顯示的操作按鈕并添加事件：
// dialog/dialog.example.tsx... {setX(false)}}>1, {setX(false)}}>2, ]}> hi...咱們看到這個，第一反應(yīng)應(yīng)該是覺得這樣寫很麻煩，我寫個 dialog， visible要自己，按鈕要自己，連事件也要自己寫。請接受這種設(shè)定。雖然麻煩，但非常的好理解。這跟 Vue 的理念是不太一樣的。當(dāng)然后面會進(jìn)一步驟優(yōu)化。
組件內(nèi)渲染如下：
{ props.buttons }運(yùn)行起來你會發(fā)現(xiàn)有個警告：
主要是說我們渲染數(shù)組時，需要加個 key,解決方法有兩種，就是不要使用數(shù)組方式,當(dāng)然這不治本，所以這里 React.cloneElemen 出場了，它可以克隆元素并添加對應(yīng)的屬性值，如下：
{ props.buttons.map((button, index) => { React.cloneElement(button, {key: index}) })}對應(yīng)的點(diǎn)擊關(guān)閉事件相對容易這邊就不講了，可以自行查看源碼。
接下來來看一個樣式的問題，首先先給出我們遮罩的樣式：
.fui-dialog { position: fixed; background: white; min-width: 20em; z-index: 2; border-radius: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%); &-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: fade_out(black, 0.5); z-index: 1; } .... 以下省略其它樣式}我們遮罩 .fui-dialog-mask 使用 fixed 定位感覺是沒問題的，那如果在調(diào)用 dialog 同級在加以下這么元素：
666 {setX(!x)}}>點(diǎn)擊...運(yùn)行效果：
發(fā)現(xiàn)遮罩并沒有遮住 666 的內(nèi)容。這是為什么？
看結(jié)構(gòu)也很好理解，遮罩元素與 666 是同級結(jié)構(gòu)，且層級比 666 低，當(dāng)然是覆蓋不了的。那咱們可能就會這樣做，給 .fui-dialog-mask設(shè)置一個 zIndex 比它大的唄，如 9999。
效果：
恩，感覺沒問題，這時我們在 Dialog 組件在嵌套一層 zIndex 為 9 的呢，如：
...運(yùn)行效果如下：
發(fā)現(xiàn)，父元素被壓住了，里面元素 zIndex 值如何的高，都沒有效果。
那這要怎么破？答案是不要讓它出現(xiàn)在任何元素的里面，這怎么可能呢。這里就需要引出一個神奇的 API了。這個 API 叫做 傳送門(portal)。
用法如下：
return ReactDOM.createPortal( this.props.children, domNode);第一個參數(shù)就是你的 div，第二個參數(shù)就是你要去的地方。
import React, {Fragment, ReactElement} from 'react'import ReactDOM from 'react-dom'import './dialog.scss';import {Icon} from '../index'import {scopedClassMaker} from '../classes'interface Props { visible: boolean, buttons: Array, onClose: React.MouseEventHandler, closeOnClickMask?: boolean}const scopedClass = scopedClassMaker('fui-dialog')const sc = scopedClassconst Dialog: React.FunctionComponent = (props) => { const onClickClose: React.MouseEventHandler = (e) => { props.onClose(e) } const onClickMask: React.MouseEventHandler = (e) => { if (props.closeOnClickMask) { props.onClose(e) } } const x = props.visible ? 提示 {props.children} { props.buttons.map((button, index) => { React.cloneElement(button, {key: index}) }) } : null return ( ReactDOM.createPortal(x, document.body) )}Dialog.defaultProps = { closeOnClickMask: false}export default Dialog運(yùn)行效果：
當(dāng)然這樣，如果 Dialog 層級比同級的 zIndex 小的話，還是覆蓋不了。 那 zIndex 一般設(shè)置成多少比較合理。一般 Dialog 這層設(shè)置成 1, mask 這層設(shè)置成 2。定的越小越好，因?yàn)橛脩艨梢匀ジ摹?/p>
zIndex 的管理
zIndex 管理一般就是前端架構(gòu)師要做的了，根據(jù)業(yè)務(wù)產(chǎn)景來劃分，如廣告肯定是要在頁面最上面，所以 zIndex 一般是屬于最高級的。
便利的 API 之 Alert
上述我們使用 Dialog 組件調(diào)用方式比較麻煩，寫了一堆，有時候我們想到使用 alert 直接彈出一個對話框這樣簡單方便。如
example 3
alert('1')}>alert我們想直接點(diǎn)擊 button ，然后彈出我們自定義的對話框內(nèi)容為1 ，需要在 Dialog 組件內(nèi)我們需要導(dǎo)出一個 alert 方法，如下：
// dialog/dialog.tsx...const alert = (content: string) => { const component = {}}> {content} const div = document.createElement('div') document.body.append(div) ReactDOM.render(component, div)}export {alert}...運(yùn)行效果：
但有個問題，因?yàn)閷υ捒虻?visible 是由外部傳入的，且 React 是單向數(shù)據(jù)流的，在組件內(nèi)并不能直接修改 visible，所以在 onClose 方法我們需要再次渲染一個新的組件,并設(shè)置新組件 visible 為 ture,覆蓋原來的組件：
...const alert = (content: string) => { const component = { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() }}> {content} const div = document.createElement('div') document.body.append(div) ReactDOM.render(component, div)}..便利的 API 之 confirm
confirm 調(diào)用方式：
confirm('1', ()=>{}, ()=> {})}>confirm第一個參數(shù)是顯示的內(nèi)容，每二個參數(shù)是確認(rèn)的回調(diào)，第三個參數(shù)是取消的回調(diào)函數(shù)。
實(shí)現(xiàn)方式：
const confirm = (content: string, yes?: () => void, no?: () => void) => { const onYes = () => { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() yes && yes() } const onNo = () => { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() no && no() } const component = ( { onNo()}} buttons={[yes, no ]} > {content} ) const div = document.createElement('div') document.body.appendChild(div) ReactDOM.render(component, div)}事件處理跟 Alter 差不多，唯一多了一步就是 confirm 當(dāng)點(diǎn)擊 yes 或者 no 的時候，如果外部有回調(diào)就需要調(diào)用對應(yīng)的回調(diào)函數(shù)。
便利的 API 之 modal
modal 調(diào)用方式：
{modal(你好
)}}>modalmodal 對應(yīng)傳遞的內(nèi)容就不是單單的文本了，而是元素。
實(shí)現(xiàn)方式：
const modal = (content: ReactNode | ReactFragment) => { const onClose = () => { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() } const component = {content} const div = document.createElement('div') document.body.appendChild(div) ReactDOM.render(component, div)}注意，這邊的 content 類型。
運(yùn)行效果：
這還有個問題，如果需要加按鈕呢，可能會這樣寫：
{modal(你好 close
)}}>modal這樣是關(guān)不了的，因?yàn)?Dialog 是封裝在 modal 里面的。如果要關(guān)，必須控制 visible,那很顯然我從外面控制不了里面的 visible,所以這個 button 沒有辦法把這個 modal 關(guān)掉。
解決方法就是使用閉包，我們可以在 modal 方法里面把 close 方法返回：
const modal = (content: ReactNode | ReactFragment) => { const onClose = () => { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() } const component = {content} const div = document.createElement('div') document.body.appendChild(div) ReactDOM.render(component, div) return onClose;}最后多了一個 retrun onClose,由于閉包的作用，外部調(diào)用返回的 onClose 方法可以訪問到內(nèi)部變量。
調(diào)用方式：
const openModal = () => { const close = modal(你好 close()}>close
)}modal重構(gòu) API
在重構(gòu)之前，我們先要抽象 alert, confirm, modal 中各自的方法：
從表格可以看出，modal 與其它兩個只多了一個 retrun api,其實(shí)其它兩個也可以返回對應(yīng)的 Api，只是我們沒去調(diào)用而已，所以補(bǔ)上：
這樣一來，這三個函數(shù)從抽象層面上來看是類似的，所以這三個函數(shù)應(yīng)該合成一個。
首先抽取公共部分，先取名為 x ,內(nèi)容如下：
const x= (content: ReactNode, buttons ?:Array, afterClose?: () => void) => { const close = () => { ReactDOM.render(React.cloneElement(component, {visible: false}), div) ReactDOM.unmountComponentAtNode(div) div.remove() afterClose && afterClose() } const component = { close(); afterClose && afterClose() }} buttons={buttons} > {content} const div = document.createElement('div') document.body.append(div) ReactDOM.render(component, div) return close}alert 重構(gòu)后的代碼如下：
const alert = (content: string) => { const button = close()}>ok const close = x(content, [button])}confirm 重構(gòu)后的代碼如下：
const confirm = (content: string, yes?: () => void, no?: () => void) => { const onYes = () => { close() yes && yes() } const onNo = () => { close() no && no() } const buttons = [ yes, no ] const close = modal(content, buttons, no)}modal 重構(gòu)后的代碼如下：
const modal = (content: ReactNode | ReactFragment) => { return x(content)}最后發(fā)現(xiàn)其實(shí) x 方法就是 modal 方法，所以更改 x 名為 modal,刪除對應(yīng)的 modal 定義。
總結(jié)
本組件為使用優(yōu)化樣式，如果有興趣可以自行優(yōu)化，本節(jié)源碼已經(jīng)上傳至這里(https://github.com/qq449245884/frank-react2-test)中的 lib/dialog。
總結(jié)
以上是生活随笔為你收集整理的react antd confirm content list_React造轮系列：对话框组件 - Dialog 思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 天玥电脑用的什么cpu(天玥电脑生产厂家
- 下一篇： python tkinter计算器实例_