实现react createElement所遇见的问题

最近在实现createElement API的原理时遇见一个问题，希望寻求帮助与解惑。

有问题代码

import React from './react';
const style = {border:'3px solid red', margin:'5px'}
let element = (
  <div id='A1' key='A1' style={style}>
    A1
    <div id='B1' key='B1' style={style}>
      B1
      <div id='c1' key='c1' style={style}> C1</div>
      <div id='c2' key='c2' style={style}>C2</div>
    </div>
    <div id='B2' key='B2' style={style}>
      B2
    </div>
  </div>
)
console.log(element);
复制代码

此时的打印结果为

为了调试错误，我直接利用React.createElement进行下来的测试并得到结果。

console.log(React.createElement('div',{id:'A1'},'B1'));
复制代码

显然，问题是出在了并没有调用React.createElement函数对jsx语法进行解析，但是我不明白为何会出现此结果，希望有大佬为我进行解惑。

附上react.js代码：

const ELEMENT_TEXT = Symbol.for('ELEMENT_TEXT')

function createElement(type, props, ...children) {
    return {
        type,
        props: {
            ...props,
            children: children.map(child => {
                return typeof child === 'object' ? child : createTextNode(child)
            })
        }
    }
}
function createTextNode(textNode) {
    return {
        // ELEMENT_TEXT: A1: <div>A1</div>
        type: ELEMENT_TEXT,
        props: {
            text: textNode,
            children: []
        }
    }
}
复制代码