我正在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"

我不知道发生了什么事,如果你知道的话会有帮助的.

推荐答案

React专门寻找$$typeof属性,以将其标识为Reaction元素:

"$$typeof": Symbol("react.element")

它不仅必须具有该属性,还必须具有该属性上的几个预定义符号之一.这些符号不是由Reaction导出的,但你可以通过Symbol.for("react.element")或类似的途径获得它们."react.ement"是最常见的,但你也可以在this file中看到其他的.您可能还需要添加其他属性来完成愚弄react ,例如ref: null.

在Reaction代码库中有几个位置可以判断$$typeof,但这里有一个:https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactChildFiber.js#L534.下面的代码在几行之后抛出了您看到的异常:

throwOnInvalidObjectType(returnFiber, newChild);

Javascript相关问答推荐

React Native平面列表自动滚动

模块与独立组件

Chrome是否忽略WebAuthentication userVerification设置?""

从Node JS将对象数组中的数据插入Postgres表

显示图—如何在图例项上添加删除线效果?

cypress中e2e测试上的Click()事件在Switch Element Plus组件上使用时不起作用

如何解决useState错误—setSelect Image不是函数''

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

可更改语言的搜索栏

S文本内容和值不必要的不同

Chart.js-显示值应该在其中的引用区域

Reaction Native中的范围滑块

如何在DYGRAPS中更改鼠标事件和键盘输入

当我点击一个按钮后按回车键时,如何阻止它再次被点击

如何修复使用axios运行TSC index.ts时出现的错误?

通过解构/功能组件接收props-prop验证中缺少错误"

未找到用于 Select 器的元素:in( puppeteer 师错误)

需要RTK-在ReactJS中查询多个组件的Mutations 数据

Chrome上的印度时区名S有问题吗?

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题