快捷導(dǎo)航

React創(chuàng)建對(duì)話框組件的方法實(shí)例

更新時(shí)間：2022年05月12日 11:33:13 作者：csu_zipple

在項(xiàng)目開(kāi)發(fā)過(guò)程中,對(duì)于復(fù)雜的業(yè)務(wù)選擇功能很常見(jiàn),下面這篇文章主要給大家介紹了關(guān)于React創(chuàng)建對(duì)話框組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

原生的前端體系創(chuàng)建一個(gè)對(duì)話框可是再簡(jiǎn)單不過(guò)了。但是如果放到組件化思想下的react體系中，想要制作一個(gè)屬于自己的對(duì)話框還是有一定的麻煩的。主要遇到的問(wèn)題有兩個(gè)：一是如何在子組件中創(chuàng)建body下的對(duì)話框組件，二是如何刪除這個(gè)組件。

接下來(lái)我們就一步一步解決這兩個(gè)問(wèn)題。

我們先寫(xiě)好dialog組件：（所有的樣式都不寫(xiě)了，這里實(shí)現(xiàn)一個(gè)原型）

class Dialog extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div className="dialog">
                <div className="title">{this.props.title}</div>
                <div className="content">{this.props.children}</div>
                <div className="button-area">
                    <a onClick={this.props.onClickCancle.bind(this)}   className="btns">取消</a>//這里接收父組件傳遞過(guò)來(lái)的關(guān)閉對(duì)話框的方法
                    <a className="btns btns-blue">確定</a>
                </div>
            </div>
        )
    }
}

動(dòng)態(tài)創(chuàng)建組件到body中，react為我們提供了一個(gè)方法：ReactDOM.unstable_renderSubtreeIntoContainer（parent，component，dom），parent一般是this，組件就是對(duì)話框組件，dom就是要插入的dom節(jié)點(diǎn)。

根據(jù)這個(gè)方法，我們就可以為對(duì)話框?qū)懸粋€(gè)父組件，用于全屏居中顯示：

class DialogCenter extends Component{
    constructor(props){
        super(props);
    }
    appendToBody() {
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            <Dialog title="this is  a title!" onClickCancle={this.props.onClickCancle.bind(this)}>
                <span>這是內(nèi)容內(nèi)容內(nèi)容</span>
            </Dialog>,
            this.container
        )
    }
    componentDidMount() {
        this.container = document.createElement('div');
        $(this.container).addClass("global-hide");
        document.body.appendChild(this.container);
        this.appendToBody()
    }
    componentDidUpdate() {
        this.appendToBody()
    }
    componentWillUnmount() {
        document.body.removeChild(this.container)
    }
    render(){
        return null;
    }
}

這樣我們就解決了第一個(gè)問(wèn)題，那么接下來(lái)我們要怎樣調(diào)用這個(gè)組件呢？

下面是調(diào)用對(duì)話框的父組件

//啟動(dòng)對(duì)話框，選擇職業(yè)，開(kāi)始考試
class BeginExamComponent extends Component{
    constructor(props){
        super(props);
    }
    //使用函數(shù)在render中動(dòng)態(tài)創(chuàng)建組件
    renderDialog(){
        if (this.props.isShow){
            console.log("開(kāi)始創(chuàng)建對(duì)話框組件");
            return(//將關(guān)閉對(duì)話框的方法傳遞下去
                <DialogCenter onClickCancle={this.props.onButtonClose.bind(this)}/>
            )
        }else{
            return null;//這里實(shí)際上就是所謂的刪除組件
        }
    }
    render(){
        return(
            <div className="begin-exam-area">
                <div className="top-tips">點(diǎn)擊按鈕，請(qǐng)確認(rèn)信息后開(kāi)始考試</div>
                <div className="button-wrapper">
                    <button onClick={this.props.onButtonClick.bind(this)}>開(kāi)始考試</button>//啟動(dòng)對(duì)話框的函數(shù)
                    <button>模擬考試</button>
                </div>
                {this.renderDialog()}
            </div>
        )
    }
}

這里我們可以看到，我們使用了一個(gè)renderDialog函數(shù)在render中動(dòng)態(tài)創(chuàng)建對(duì)話框組件，之所以可以這樣直接寫(xiě)進(jìn)去，主要是我們之前的DialogCenter組件實(shí)現(xiàn)了ReactDOM.unstable_renderSubtreeIntoContainer方法，因此這個(gè)組件將會(huì)直接在body直接子節(jié)點(diǎn)中渲染。

export class Home extends Component{

    constructor(){
        super();
        this.state={
           showDialog:false
        }
    }

    showDialog(){
        console.log("調(diào)用對(duì)話框");
        this.setState({
            showDialog:true
        })
    }

    closeDialog(){
        console.log("卸載對(duì)話框");
        this.setState({
            showDialog:false
        })
    }
    render(){
        return(
            <div>
               <HomeHeader avatarUid={this.props.account}/>
                <SearchArea/>
                <BeginExamComponent onButtonClick={this.showDialog.bind(this)} onButtonClose={this.closeDialog.bind(this)} isShow={this.state.showDialog}/>
            </div>
        )
    }
}

通過(guò)State控制組件的創(chuàng)建與否，就目前來(lái)看是創(chuàng)建對(duì)話框組件的核心。從這里可以實(shí)現(xiàn)很多有意思的東西，就看怎么去琢磨了。

總結(jié)

到此這篇關(guān)于React創(chuàng)建對(duì)話框組件的文章就介紹到這了,更多相關(guān)React創(chuàng)建對(duì)話框組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: