如何让React JSX自动支持任意自定义HTML标签渲染？

问题背景 #

在原生HTML里，我们可以随意使用自定义标签，比如：

<card>
  <header>
    <logo>
      <img src="..">
    </logo>
  </header>
  <subject>
  ..
  </subject>
  <information>
  ..
  </information>
</card>

这种写法虽不符合标准，但结构十分清晰。现在想找一种无需手动定义组件的彻底方案，让React JSX自动支持所有自定义标签。之前试过下面的代码，但既没效果也不具备自动性：

const tags = ['card', 'header', 'logo', 'subject', 'information'];

const components = tags.reduce((obj, tag) => {
  obj[tag] = ({ children, ...props }) => React.createElement(tag, props, children);
  return obj;
}, {});

解决方案 #

要实现自动支持所有自定义标签，核心是让React遇到未知标签时，默认渲染为对应的HTML自定义元素，而非报错。可以通过以下两种方式实现：

方法1：配置JSX编译规则（推荐） #

如果用Babel编译JSX，修改@babel/preset-react的配置，将throwIfNamespace设为false，让未知标签默认被当作HTML元素处理：

{
  "presets": [
    ["@babel/preset-react", {
      "throwIfNamespace": false,
      "runtime": "automatic"
    }]
  ]
}

这种方式下，所有自定义标签会被Babel直接编译成React.createElement('自定义标签名', ...)，无需额外代码，完全自动支持。

方法2：全局覆盖React.createElement #

如果无法修改编译配置，可以全局重写React.createElement，检测到自定义标签时直接创建对应HTML元素：

import React from 'react';

// 保存原生createElement方法
const originalCreateElement = React.createElement;

// 重写createElement
React.createElement = (type, props, ...children) => {
  // 定义标准HTML标签集合，可按需补充
  const standardHtmlTags = new Set([
    'div', 'span', 'p', 'h1', 'h2', 'header', 'footer', 'section', 'article'
  ]);
  // 判断是否为自定义标签：字符串类型且不在标准标签集合内
  if (typeof type === 'string' && !standardHtmlTags.has(type)) {
    return originalCreateElement(type, props, ...children);
  }
  // 其他情况使用原生方法处理
  return originalCreateElement(type, props, ...children);
};

原代码无效原因 #

你之前的代码只是手动定义了部分标签的组件，但需要在JSX中显式导入或声明才能使用，并没有实现“自动支持所有标签”的效果。而且新增自定义标签时还要手动更新tags数组，完全不具备自动性。

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