React中createElement创建React Fragment应传入什么tag参数

要创建JSX语法<></>对应的无多余DOM包裹元素，向React.createElement传入的tag参数为React.Fragment（React 17+支持单独从react包导入Fragment使用，不需要引入整个React对象）。

注意：<></>是React.createElement(React.Fragment, null, children)的JSX语法糖，不支持传入className、style这类DOM属性，也不会渲染为真实的DOM节点。

你的现有组件逻辑直接给标签传入了className属性，直接传Fragment作为tag会触发React的无效属性警告，同时原本依靠根节点CSS类控制桌面端显隐的逻辑会完全失效——毕竟没有真实DOM节点承载样式规则。如果要支持Fragment作为标签，需要增加分支判断，同时如果要保留无多余DOM的显隐控制能力，建议搭配JS层面的视口判断做条件渲染，不要依赖CSS控制。

修正后的组件参考实现：

import { createElement, Fragment, type ReactNode, type ElementType } from 'react';
import clsx from 'clsx';
import styles from './OnlyDesktop.module.css';

type OnlyDesktopProps = {
  children: ReactNode;
  tag?: ElementType;
  className?: string;
};

const OnlyDesktop = ({ children, tag = 'div', className }: OnlyDesktopProps) => {
  // Fragment 场景单独处理，不传入className等DOM属性
  if (tag === Fragment) {
    // 若需要此场景下仍保留仅桌面端展示逻辑，可在此处通过useMediaQuery等方式判断视口宽度，不满足宽度时返回null即可
    return createElement(Fragment, null, children);
  }

  return createElement(
    tag,
    { className: clsx(styles.root, className) },
    children
  );
};

// 调用示例：使用Fragment作为无DOM包裹标签
<OnlyDesktop tag={Fragment}>
  <span>桌面端展示内容1</span>
  <span>桌面端展示内容2</span>
</OnlyDesktop>

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