非React项目中自定义JSX子元素类型检查实现问询

要实现这类元素组合规则的检查，主要可以从编译时校验、运行时拦截和TypeScript类型约束三个方向入手，下面是具体的实现方式：

一、编译时校验（Babel 插件） #

自定义JSX通常依赖Babel转译，写个简单的Babel插件遍历AST，在编译阶段就抛出错误，提前拦截不符合规则的写法，避免错误留到运行时。

示例插件代码：

module.exports = function (babel) {
  const { types: t } = babel;

  // 定义元素的子节点规则
  const elementRules = {
    Fragment: { allowedChildren: ['row'] },
    row: { allowedChildren: ['select', 'button'] },
    select: { forbiddenChildren: ['row'] }
  };

  return {
    visitor: {
      JSXElement(path) {
        const openingNode = path.node.openingElement;
        // 获取当前元素名称（兼容Fragment等特殊标识）
        const elementName = openingNode.name.name || 
          (openingNode.name.type === 'JSXIdentifier' ? openingNode.name.name : '');
        
        if (!elementRules[elementName]) return;

        // 遍历所有子节点，过滤掉文本、注释等非元素节点
        path.node.children.forEach(child => {
          if (child.type !== 'JSXElement') return;
          
          const childElementName = child.openingElement.name.name;
          const rule = elementRules[elementName];

          // 检查允许的子元素
          if (rule.allowedChildren && !rule.allowedChildren.includes(childElementName)) {
            throw path.buildCodeFrameError(`<${elementName}> 仅允许包含 <${rule.allowedChildren.join('>, <')}> 元素，当前子元素是 <${childElementName}>`);
          }

          // 检查禁止的子元素
          if (rule.forbiddenChildren && rule.forbiddenChildren.includes(childElementName)) {
            throw path.buildCodeFrameError(`<${elementName}> 禁止包含 <${childElementName}> 元素`);
          }
        });
      }
    }
  };
};

把这个插件加入你的Babel配置（比如babel.config.js），编译时一旦出现不符合规则的JSX结构，就会直接抛出带代码位置的错误，方便快速定位。

二、运行时校验 #

在你自定义的元素创建核心函数（比如createElement）里添加校验逻辑，当元素被创建时实时检查子元素类型，不符合规则就抛出警告或错误，适合开发阶段调试。

示例代码：

// 自定义的createElement函数（你项目中用来转换JSX的核心函数）
function createElement(type, props, ...children) {
  // 定义元素组合规则
  const elementRules = {
    Fragment: { allowedChildren: ['row'] },
    row: { allowedChildren: ['select', 'button'] },
    select: { forbiddenChildren: ['row'] }
  };

  const rule = elementRules[type];
  if (rule) {
    children.forEach(child => {
      // 假设你的元素实例有`type`属性标识元素类型，根据实际情况调整
      if (child?.type) {
        const childType = child.type;

        if (rule.allowedChildren && !rule.allowedChildren.includes(childType)) {
          console.error(`[元素校验错误] <${type}> 仅允许包含 <${rule.allowedChildren.join('>, <')}>，当前子元素类型是 ${childType}`);
        }

        if (rule.forbiddenChildren && rule.forbiddenChildren.includes(childType)) {
          console.error(`[元素校验错误] <${type}> 禁止包含 <${childType}> 元素`);
        }
      }
    });
  }

  // 原有的元素创建逻辑...
  return { type, props, children };
}

这种方式在浏览器控制台就能直接看到错误信息，开发时能快速发现问题。

三、TypeScript类型约束（编码阶段提示） #

如果用TypeScript开发，可以通过定义严格的类型来约束children的允许类型，让IDE在编码时就给出错误提示，从源头避免不符合规则的写法。

示例类型定义：

// 提前定义各元素的Props类型，限制children的范围
type FragmentProps = {
  children: Array<JSX.Element<'row'>>;
};

type RowProps = {
  children: Array<JSX.Element<'select'> | JSX.Element<'button'>>;
};

type SelectProps = {
  // 禁止包含row元素，允许其他合法子节点（比如文本）
  children?: Exclude<JSX.Element | string | number, JSX.Element<'row'>>;
};

type ButtonProps = {
  children?: string | number;
};

// 扩展JSX全局类型，让IDE识别自定义元素的约束
declare global {
  namespace JSX {
    interface IntrinsicElements {
      row: RowProps;
      select: SelectProps;
      button: ButtonProps;
    }
    // 禁用默认的children自动推断，强制使用我们定义的约束
    interface ElementChildrenAttribute {
      children: never;
    }
  }
}

这样当你在写JSX时，如果Fragment里放了非row的元素，或者row里放了除select/button外的元素，IDE会直接标红提示，不用等到编译或运行。

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