如何不使用React

时间:2019-04-22 08:12:07

标签: javascript reactjs

所以我的任务是编写2个函数:

  • React.render
  • React.createElement

我坚持使用React.createElement。

const React = {
    createElement(element, props, ...children) {
        let elem = document.createElement(element);
        console.log(elem)
        console.log(children)

        return elem
    },

    render(app, root) {
        root.innerHTML = app
    }
}

这是console.log(elem)的输出

<li></li>
<li></li>
<li></li>
<ul></ul>

和console.log(children)的输出


["one"]
["two"]
["three"]
[Array[3]]
0: Array[3]
0: 
<li></li>
1: 
<li></li>
2: 
<li></li>

它涉及递归,但我不明白它是如何工作的以及如何构建 此功能。

var reactElementUl = React.createElement(
    'ul', {
        className: 'myList'
    },
        React.createElement('li', {id: 'li1'},'one'),
        React.createElement('li', {id: 'li2'},'two'),
        React.createElement('li', {id: 'li3'},'three')
);

React.render(reactElementUl, document.getElementById('app'));

非常感谢您的帮助!

0 个答案:

没有答案