react如何取消驼峰校验
取消 React 中的驼峰校验
React 默认要求组件属性（props）采用驼峰命名法（camelCase），但可以通过以下方法禁用这一校验规则：
修改项目配置
在项目中禁用驼峰校验通常需要调整 ESLint 或相关工具的配置。React 的驼峰校验通常由 eslint-plugin-react 的 react/no-unknown-property 规则控制。
在 .eslintrc.js 或 .eslintrc.json 文件中添加以下配置：
{
"rules": {
"react/no-unknown-property": ["error", { "ignore": ["custom-attribute"] }]
}
}使用自定义属性前缀
如果项目允许，可以通过添加 data- 或 aria- 前缀绕过驼峰校验。React 不会校验带有这些前缀的属性名：
<div data-custom-attribute="value" aria-label="example" />直接修改 DOM 属性
在极少数情况下，可以通过 ref 直接操作 DOM 节点，绕过 React 的属性校验：
function MyComponent() {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
ref.current.setAttribute('custom-attribute', 'value');
}
}, []);
return <div ref={ref} />;
}禁用特定文件的校验
如果只需要在特定文件中禁用驼峰校验，可以使用 ESLint 的注释规则：
/* eslint-disable react/no-unknown-property */
<div custom-attribute="value" />
/* eslint-enable react/no-unknown-property */注意事项
- 禁用驼峰校验可能导致代码风格不一致，建议仅在集成第三方库或遗留代码时使用。
- 直接操作 DOM 属性可能影响 React 的虚拟 DOM 优化。
