自定义React.createElement函数触发渲染错误，求原因及解决方法

错误根源 #

你遇到的错误是因为自定义的React元素缺少React识别合法元素的核心标识。对比官方React.createElement返回的结构，你会发现它多了一个$$typeof: Symbol("react.element")属性——这是React用来验证当前对象是否为合法React元素的关键标记。没有这个标记，React会把你的自定义对象当成普通JS对象，而普通对象不能直接作为React子节点渲染，因此抛出错误。

另外，官方元素还包含key、ref等默认属性，这些也是React元素的标准组成部分，需要补充到自定义实现中。

修改后的代码 #

import { createRoot } from "react-dom/client";
import React from "react";

function createTextElement(text) {
  return text;
}

function createElement(type, props, ...children) {
  // 提取props中的key和ref，无值则设为null
  const { key = null, ref = null, ...restProps } = props || {};
  
  return {
    // React识别合法元素的核心标识
    $$typeof: Symbol.for('react.element'),
    type,
    key,
    ref,
    props: {
      ...restProps,
      children: children.map(child =>
        typeof child === "object" ? child : createTextElement(child)
      ),
    },
    // 补充React元素标准内部属性（可选，贴近官方实现）
    _owner: null,
    _self: null,
    _source: null,
    _store: {}
  };
}

const Reacto = {
  createElement,
};

// 调用自定义函数
const element = Reacto.createElement(
  'h1',
  { className: 'greeting' },
  "This is another",
  'Hello'
);

// 调用官方函数对比
const elementReact = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello',
  "This is another"
);

console.log(element);
console.log(elementReact);

const root = createRoot(document.getElementById("root"));
root.render(element);

关键修改点说明 #

1. 添加$$typeof属性：使用Symbol.for('react.element')创建和官方一致的符号，让React识别这是合法的元素对象。
2. 处理key和ref：从props中提取这两个特殊属性，默认设为null，符合React元素的规范。
3. 补充内部属性：_owner、_self等是React内部使用的属性，虽然不影响基础渲染，但添加后能让自定义元素结构更贴近官方实现，避免潜在兼容性问题。

修改后，你的自定义createElement返回的对象就能被React正确识别，正常渲染到页面中。

内容的提问来源于stack exchange，提问作者yahya kamran