美文网首页
实现render函数

实现render函数

作者: Chris__Liu | 来源:发表于2020-04-03 11:16 被阅读0次

将树状标签转换渲染为dom节点,利用createElement创建节点,递归渲染子节点

     let ast = {
            tag: 'div',
            attr: {
                'class': 'parent',
                'key': 1
            },
            text: 1,
            children: [
                {
                    tag: 'div',
                    attr: {
                        'class': 'child',
                        'key': 1
                    },
                    text: 2,
                    children: [
                        {
                            tag: 'text',
                            attr: {
                                'class': 'child',
                                'key': 1
                            },
                            text: 2,
                        },
                        {
                            tag: 'div',
                            attr: {
                                'class': 'child',
                                'key': 2
                            },
                            text: 3,
                        }
                    ]
                },
                {
                    tag: 'div',
                    attr: {
                        'class': 'child',
                        'key': 2
                    },
                    text: 3,
                }
            ]
        }

        const render = ($el, container) => {
            // 根节点
            let root
            if( Object.prototype.toString.call($el) === "[object String]" ){
                root = document.querySelector($el)
            }else{
                root = $el
            }
            const { tag, attr, text, children } = container
            let element = document.createElement(tag)
            for (key in attr) {
                element.setAttribute(key, attr[key])
            }
            element.innerText = text
            
            if (children) {
                children.forEach((item) => {
                    render(element,item)
                })
            }
            root.appendChild(element)
        }

        render('#root', ast)

相关文章

  • Vue自定义组件

    使用render函数实现

  • 4-组件与 prop、state

    语法: 引入Component 新建一个类,继承Component 实现render函数 在render函数内返回...

  • 实现render函数

    将树状标签转换渲染为dom节点,利用createElement创建节点,递归渲染子节点

  • 实现简单render函数

    什么是Virtual Dom React和Vue2都使用了Virtual Dom技术,Virtual Dom并不是...

  • vue的render函数

    render函数的作用 我们自己使用render函数 render函数---通过initrender加入vm对象原...

  • Lesson7组件的render函数

    render函数的注意点 一个组件必须要实现一个render方法,这个render方法必须返回一个JSX元素,该元...

  • React 钩子函数

    挂载时的钩子函数 constructor():实现组件实例初始化 render():纯函数,组件渲染 compon...

  • VUE/MUI 项目小记

    render虚拟DOM构造函数 MUI上拉加载 render函数

  • JS代码题5

    实现一个简单的虚拟 DOM 渲染 实现render函数: 主要用到了DOM API 和递归

  • vue封装基础table表格

    table组件具有的功能/特点: table功能实现解析 1.选择render函数还是采用template实现组件...

网友评论

      本文标题:实现render函数

      本文链接:https://www.haomeiwen.com/subject/rgcxuhtx.html