如何在React中创建自定义固有元素？参考React Three Fiber实现

要实现像<book />这样的小写自定义标签，无需导入即可自动映射到Book组件，核心是拦截React对元素类型的处理逻辑，下面提供两种可行方案：

方案一：自定义JSX Pragma（编译时处理） #

通过替换默认的React.createElement函数，在编译阶段将小写标签映射到对应组件：

1. 定义组件映射表与自定义创建函数

import React from 'react'
import ReactDOM from 'react-dom/client'

// 目标组件
const Book = () => <div>book!</div>

// 全局维护标签-组件映射
const customTagMap = {
  book: Book
}

// 自定义createElement，拦截小写标签
function customCreateElement(type, props, ...children) {
  // 若为字符串类型的标签，优先查映射表
  if (typeof type === 'string' && customTagMap[type]) {
    type = customTagMap[type]
  }
  // 调用原生React创建逻辑
  return React.createElement(type, props, ...children)
}

2. 配置JSX编译规则
   在使用自定义标签的文件顶部添加pragma注释，指定使用自定义创建函数：

/** @jsx customCreateElement */

function App() {
  // 直接使用<book />，无需导入Book组件
  return <book />
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

如果用TypeScript，需在tsconfig.json中配置全局JSX工厂：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxFactory": "customCreateElement"
  }
}

方案二：自定义React Reconciler（运行时控制） #

这是React Three Fiber的核心实现思路，通过自定义渲染器完全控制元素解析逻辑：

1. 创建自定义Reconciler与宿主配置

import React from 'react'
import Reconciler from 'react-reconciler'
import ReactDOM from 'react-dom'

// 标签-组件映射
const componentMap = {
  book: () => <div>book!</div>
}

// 宿主配置（基于DOM环境简化）
const hostConfig = {
  // 重写元素实例创建逻辑
  createInstance(type, props) {
    // 拦截自定义小写标签
    if (componentMap[type]) {
      // 渲染对应组件到临时DOM节点
      const tempDiv = document.createElement('div')
      ReactDOM.render(React.createElement(componentMap[type], props), tempDiv)
      return tempDiv.firstChild
    }
    // 原生HTML标签正常创建
    return document.createElement(type)
  },
  // 需补全其他必要的宿主配置方法
  appendChild(parent, child) {
    parent.appendChild(child)
  },
  commitMount(instance) {
    // 挂载完成后的逻辑
  },
  // 省略其他必填方法（如createTextInstance、removeChild等）
}

// 初始化自定义渲染器
const customRenderer = Reconciler(hostConfig)

// 自定义渲染函数
function renderCustom(element, container) {
  const root = customRenderer.createContainer(container, false, false)
  customRenderer.updateContainer(element, root, null, null)
}

2. 使用自定义渲染器

// 直接渲染<book />，无需导入组件
renderCustom(<book />, document.getElementById('root'))

核心注意事项 #

• React默认将小写标签识别为原生HTML元素，必须通过拦截创建逻辑或自定义渲染器覆盖该行为
• 全局维护的标签映射表是实现"无需导入"的关键，可根据需求动态扩展
• 自定义Reconciler方案更灵活，但需要实现完整的宿主配置，适合复杂场景（如R3F的3D渲染环境）

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