文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React创建对话框组件的方法实例

2024-04-02 19:55

关注

原生的前端体系创建一个对话框可是再简单不过了。但是如果放到组件化思想下的react体系中,想要制作一个属于自己的对话框还是有一定的麻烦的。主要遇到的问题有两个:一是如何在子组件中创建body下的对话框组件,二是如何删除这个组件。

接下来我们就一步一步解决这两个问题。

我们先写好dialog组件:(所有的样式都不写了,这里实现一个原型)

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>//这里接收父组件传递过来的关闭对话框的方法
                    <a className="btns btns-blue">确定</a>
                </div>
            </div>
        )
    }
}

动态创建组件到body中,react为我们提供了一个方法:ReactDOM.unstable_renderSubtreeIntoContainer(parent,component,dom),parent一般是this,组件就是对话框组件,dom就是要插入的dom节点。

根据这个方法,我们就可以为对话框写一个父组件,用于全屏居中显示:

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>这是内容内容内容</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;
    }
}

这样我们就解决了第一个问题,那么接下来我们要怎样调用这个组件呢?

下面是调用对话框的父组件

//启动对话框,选择职业,开始考试
class BeginExamComponent extends Component{
    constructor(props){
        super(props);
    }
    //使用函数在render中动态创建组件
    renderDialog(){
        if (this.props.isShow){
            console.log("开始创建对话框组件");
            return(//将关闭对话框的方法传递下去
                <DialogCenter onClickCancle={this.props.onButtonClose.bind(this)}/>
            )
        }else{
            return null;//这里实际上就是所谓的删除组件
        }
    }
    render(){
        return(
            <div className="begin-exam-area">
                <div className="top-tips">点击按钮,请确认信息后开始考试</div>
                <div className="button-wrapper">
                    <button onClick={this.props.onButtonClick.bind(this)}>开始考试</button>//启动对话框的函数
                    <button>模拟考试</button>
                </div>
                {this.renderDialog()}
            </div>
        )
    }
}

这里我们可以看到,我们使用了一个renderDialog函数在render中动态创建对话框组件,之所以可以这样直接写进去,主要是我们之前的DialogCenter组件实现了ReactDOM.unstable_renderSubtreeIntoContainer方法,因此这个组件将会直接在body直接子节点中渲染。

export class Home extends Component{

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

    showDialog(){
        console.log("调用对话框");
        this.setState({
            showDialog:true
        })
    }

    closeDialog(){
        console.log("卸载对话框");
        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>
        )
    }
}

通过State控制组件的创建与否,就目前来看是创建对话框组件的核心。从这里可以实现很多有意思的东西,就看怎么去琢磨了。

总结

到此这篇关于React创建对话框组件的文章就介绍到这了,更多相关React创建对话框组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯