我正在try 实现React. jQuery().但我得到以下错误
Uncaught Error:Object are not valid as a React child(found:object with keys {type,props}).如果你想呈现一个子元素的集合,请改用array.
但当我try 原始函数{React.createElement}时,我的函数是{Reacto.createElement},它起作用了 但是,如果我记录从原始函数和我的函数返回的元素,它们几乎是相同的
以下是代码
import {createRoot} from "react-dom/client";
import React from "react";
function createTextElement(text){
return text
}
function createElement( type , props , ...children ){
return{
type,
props : {
...props,
children : children.map(child =>
typeof child === "object"
? child
: createTextElement(child)
),
},
}
}
const Reacto = {
createElement,
}
//Calling mine function
const element = Reacto.createElement(
'h1',
{ className: 'greeting' },
"This is another",
'Hello'
);
//calling Reacts function
const elementReact = React.createElement(
'h1',
{ className: 'greeting' },
'Hello',
"This is another"
);
//logging both elements
console.log(element);
console.log(elementReact);
const root = createRoot(document.getElementById("root"));
root.render(element)
这里有些木头
这是我的元素
Object { type: "h1", props: {…} }
props: Object { className: "greeting", children: (2) […] }
children: Array [ "This is another", "Hello" ]
0: "This is another"
1: "Hello"
length: 2
<prototype>: Array []
className: "greeting"
<prototype>: Object { … }
type: "h1"
<prototype>: Object { … }
这是React元素
Object { "$$typeof": Symbol("react.element"), type: "h1", key: null, ref: null, props: {…}, _owner: null, _store: {…}, … }
"$$typeof": Symbol("react.element")
_owner: null
_self: null
_source: null
_store: Object { … }
key: null
props: Object { className: "greeting", children: (2) […] }
children: Array [ "Hello", "This is another" ]
0: "Hello"
1: "This is another"
length: 2
<prototype>: Array []
className: "greeting"
<prototype>: Object { … }
ref: null
type: "h1"
我不知道发生了什么事,如果你知道的话会有帮助的.