React自定义组件camelCase属性TS正常JS报错如何解决

这个报错和TS/JS运行环境没有关联，核心原因是自定义的btnStyle属性最终被透传到了原生DOM元素上。React 16+版本会对原生DOM上的非标准属性抛出该警告。
TS环境下未出现报错和类型检查无关——类型检查仅在编译阶段生效，不会修改运行时的属性传递逻辑，大概率是控制台警告被过滤、或本地开发热更新未触发警告提示，本质问题在两种环境下是一致的。

根据你的组件实现场景对应处理即可，修复后camelCase格式的自定义属性在TS/JS环境下都可以正常使用，不会抛出警告：

• 原生标签手动透传属性场景
  确保所有自定义组件属性被显式解构，仅将原生DOM支持的标准属性（如onClick、disabled、type等）展开到原生标签上，不要把自定义属性传入DOM。正确写法参考：

  // 类型定义如果需要继承原生button属性，用Omit排除自定义属性，避免类型误导
  interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'btnStyle'> {
    btnStyle?: 'plain' | 'primary' | 'danger';
  }
  
  const Button: React.FC<ButtonProps> = ({ btnStyle = 'default', children, ...restNativeProps }) => {
    // 自定义属性btnStyle仅在组件内部逻辑消费，用于生成样式、控制逻辑
    const btnClassName = `custom-btn btn-${btnStyle}`;
    // 仅透传原生支持的属性到DOM标签
    return <button className={btnClassName} {...restNativeProps}>{children}</button>;
  };
  

• 使用CSS-in-JS库（styled-components/emotion等）场景
  这类库默认会将所有接收的props透传到底层DOM节点，需要手动配置过滤自定义属性，避免传入DOM：
  • styled-components 配置：

    const StyledButton = styled.button.withConfig({
      shouldForwardProp: (propName) => propName !== 'btnStyle'
    })<{ btnStyle?: string }>`
      padding: 8px 16px;
      ${({ btnStyle }) => btnStyle === 'plain' && `
        background: #ffffff;
        border: 1px solid #e5e7eb;
      `}
    `;
    

  • emotion 配置：

    const StyledButton = styled('button', {
      shouldForwardProp: (propName) => propName !== 'btnStyle'
    })<{ btnStyle?: string }>`
      /* 样式逻辑和上述一致 */
    `;
    

• 二次封装第三方组件场景
  检查下层封装的组件是否会自动透传未识别属性到DOM，确保自定义属性仅在当前组件逻辑内消费，不要向无关节点透传。

修改完成后，在页面渲染组件，打开浏览器开发者工具检查Elements面板：如果最终渲染的原生button标签上没有btnStyle或btnstyle属性，说明属性透传逻辑正确，控制台不会再抛出对应警告。

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