如何解决React+TypeScript报错「JSX元素类无props属性不支持传参」

该报错的核心原因是你传递mr属性的Text组件没有在其TypeScript类型定义中声明该属性，或你导入的Text组件并非支持间距属性的对应UI库组件。可按以下步骤排查修复：

• 先修正代码里的语法错误：你当前return块的标签不匹配，<FormField>的闭合标签误写为</>，改为</FormField>即可，标签不匹配也可能引发关联的渲染类型错误

  // 修正后代码示例
  return (
      <FormField label={renderLabel}>
          {({ field, form }: FieldProps) => (
              <Switch />
          )}
      </FormField>
  );
  

• 检查Text组件的导入来源：如果你使用的是Chakra UI、Mantine等默认支持mr（margin-right简写）属性的UI库，确认你没有错误导入其他同名的自定义Text组件，也没有把原生HTML元素错误别名定义为Text
• 如果你是自定义的Text组件，补充对应的props类型定义即可，示例如下：

  // Text组件定义文件
  import React from 'react';
  
  type TextProps = {
    children: React.ReactNode;
    mr?: number | string;
    // 可根据需求扩展其他样式属性，也可直接继承HTML span的所有属性
  } & React.HTMLAttributes<HTMLSpanElement>;
  
  const Text = ({ children, mr, ...rest }: TextProps) => {
    // 把mr属性映射为对应的样式
    return <span style={{ marginRight: mr }} {...rest}>{children}</span>;
  };
  
  export default Text;
  

• 如果你暂时无法修改Text组件的定义，可改为行内style写法传递边距，避开属性不支持的问题：

  {/* 按你项目的间距规则换算，mr={2}通常对应2*基础间距，比如基础间距4px时对应8px */}
  <Text style={{ marginRight: 8 }}>Event forwarding</Text>
  

• 仅调试阶段可以临时用// @ts-ignore忽略该行的类型校验，验证是否为mr属性导致的报错：

  // @ts-ignore
  <Text mr={2}>Event forwarding</Text>
  

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