index.js
import React from './miniReact/react.js';
const style = {border:'3px solid red', margin:'5px'}
const 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>
)
------------------------------------------
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: []
}
}
}
问题: https://i.stack.imgur.com/2gpIq.png
当我使用我的 React.createElement 时,我遇到了此图像中显示的问题 (https://i.stack.imgur.com/2gpIq.png),我遇到了一个问题,即“A1”应该是具有对象类型的节点。但是,它仍然是一个文本节点。似乎 children.map 函数不起作用。那么,你能给我一些关于这个问题的答案吗?谢谢。