代码之家  ›  专栏  ›  技术社区  ›  yahya kamran

对象作为React子对象无效(找到:具有键{type,props}的对象)。如果要渲染子对象的集合,请改用数组

  •  0
  • yahya kamran  · 技术社区  · 1 年前

    我正在尝试实现React.createElement()。但我得到了以下错误

    未捕获的错误:对象作为React子对象无效(找到:具有键{type,props}的对象)。如果要渲染子对象的集合,请改用数组。

    但当我尝试原始函数{React.createElement}时,我的是{Reacto.createElement},它可以工作 但如果我记录Original和我的函数返回的元素,它们几乎是一样的

    这是代码

    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 { … }
    

    这是Reacts元素

    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"
    

    我不知道发生了什么事,如果你知道的话,任何事情都会有所帮助。

    1 回复  |  直到 1 年前
        1
  •  1
  •   Nicholas Tower    1 年前

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

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

    它不仅必须具有该属性,还必须在该属性上具有为数不多的预定义符号之一。符号不是通过react导出的,但您可以通过 Symbol.for("react.element") 或类似的。“react.element”是最常见的,但你可以在中看到其他元素 this file 。您可能还需要添加其他属性来完成欺骗反应,例如 ref: null .

    在react代码库中有几个地方是他们检查的地方 $$类型 ,但这里有一个: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactChildFiber.js#L534 。您看到的异常在几行之后由以下代码引发:

    throwOnInvalidObjectType(returnFiber, newChild);
    
    推荐文章