如何在React组件接口中强制限定children可接收的HTML标签类型

报错原因说明 #

你之前用HTMLParagraphElement定义类型报错，是因为该类型对应原生DOM实例，而JSX返回的是React虚拟元素实例（ReactElement），两者类型不匹配才会报错。

方案1：限定children为p标签元素 #

如果需要保留用户传入结构的灵活性，只做元素类型限制，可以这么实现：

类型定义 #

通过ReactElement泛型限定最外层只能传入p标签，编译阶段就会拦截button、h1等其他元素的传入：

import type { ReactElement, HTMLAttributes, Children } from 'react';

interface CustomCheckboxProps {
  children?: ReactElement<HTMLAttributes<HTMLParagraphElement>>;
}

运行时补充校验 #

TypeScript编译阶段无法校验p标签内部的子元素类型，可以补充运行时代码做第二层拦截：

const CustomCheckbox = (props: CustomCheckboxProps) => {
  const { children } = props;

  if (children) {
    // 校验最外层必须是p标签
    if (children.type !== 'p') {
      throw new Error('CustomCheckbox的children最外层只能是p标签');
    }
    // 校验p标签内部只能包含文本和span标签
    Children.forEach(children.props.children, child => {
      if (typeof child !== 'string' && child?.type !== 'span') {
        throw new Error('p标签内部仅允许存在文本和span标签');
      }
    })
  }

  return (
    <div className="flex">
      <input type="checkbox" />
      <label>{children}</label>
    </div>
  );
};

方案2：组件内置高亮逻辑（更推荐） #

如果不需要用户自定义复杂结构，完全可以把高亮逻辑封装在组件内部，不开放HTML结构传入权限，从根源上避免非法元素传入：

interface CustomCheckboxProps {
  // 完整文本内容
  text: string;
  // 需要高亮的子字符串，支持扩展为数组实现多段高亮
  highlightSubstring?: string;
  // 高亮样式自定义类名
  highlightClassName?: string;
}

const CustomCheckbox = ({ 
  text, 
  highlightSubstring, 
  highlightClassName = 'text-red-300' 
}: CustomCheckboxProps) => {
  const renderFormattedText = () => {
    // 没有配置高亮则直接返回纯文本
    if (!highlightSubstring || !text.includes(highlightSubstring)) {
      return <p>{text}</p>;
    }
    // 分割文本拼接高亮结构
    const [prefix, ...suffixParts] = text.split(highlightSubstring);
    const suffix = suffixParts.join(highlightSubstring);
    return (
      <p>
        {prefix}
        <span className={highlightClassName}>{highlightSubstring}</span>
        {suffix}
      </p>
    );
  };

  return (
    <div className="flex">
      <input type="checkbox" />
      <label>{renderFormattedText()}</label>
    </div>
  );
};

父组件使用示例 #

const Parent = () => {
  return (
    <CustomCheckbox 
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      highlightSubstring="Lorem ipsum dolor sit amet"
    />
  );
};

该方案不需要用户传入任何HTML结构，所有标签都由组件内部生成，完全规避了传入按钮、列表等非法元素的问题，使用成本也更低。

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