使用recompose编写HOC时小驼峰Props触发React警告问题

嘿，这个问题其实和recompose本身没啥关系，根本不是要求必须把所有Props改成全小写哦！咱们来一步步拆解原因和解决办法：

• React会对传递给原生DOM元素（比如<div>、<button>这类浏览器自带的标签）的属性做严格校验。如果遇到它不识别的事件处理属性（比如你自定义的onSaveChanges），就会抛出你看到的「Unknown event handler property」警告。
• 你说全小写就没警告，其实是个巧合：全小写的属性比如onsavechanges不会被React判定为“事件处理属性”（React的内置事件都是小驼峰格式，比如onClick），所以它只会把这类属性当成普通DOM属性处理，不会触发警告，但这绝对不是正确的解决思路。

根据你的HOC使用场景，选对应的方式就行：

1. 过滤掉自定义Props，别传给原生DOM #

如果你的HOC内部是渲染原生DOM元素，那一定要把自定义的Props（比如onSaveChanges）过滤掉，别一股脑传给原生标签。可以用recompose自带的omit高阶组件来做这件事：

import { compose, omit } from 'recompose';

// 用omit移除自定义的事件属性，避免传递给原生DOM
const enhance = compose(
  omit(['onSaveChanges', 'onCancelEdit']), // 把所有自定义事件都列在这里
  // 你的其他增强逻辑，比如withState、withHandlers之类的
);

const MyEnhancedComponent = enhance((props) => {
  // 这里的props已经去掉了自定义事件，放心传给原生元素
  return <div {...props} />;
});

2. 确保Props传给的是自定义组件而非原生DOM #

如果你的HOC是用来增强自定义React组件（不是<div>这种原生标签），那React不会校验这些自定义属性，自然就不会有警告。比如：

// 先定义一个自定义组件，接收你的自定义Props
const MyCustomForm = ({ onSaveChanges, title, ...rest }) => {
  // 在这里处理onSaveChanges的逻辑
  return (
    <div {...rest}>
      <h3>{title}</h3>
      <button onClick={onSaveChanges}>保存</button>
    </div>
  );
};

// 用recompose增强这个自定义组件
const enhance = compose(
  // 你的增强逻辑，比如注入状态、处理函数等
);
const EnhancedForm = enhance(MyCustomForm);

// 使用时传递onSaveChanges完全不会有警告
<EnhancedForm title="编辑资料" onSaveChanges={() => console.log('保存')} />

• recompose完全支持小驼峰命名的Props，这也是React生态的标准写法（比如React内置的onClick、onChange都是小驼峰），放心用就行。
• 如果你怕搞混哪些属性要传给原生DOM，也可以在组件里用解构赋值把自定义属性单独拎出来，剩下的再展开传递：

const MyComponent = ({ onSaveChanges, customProp, ...domProps }) => {
  // 先处理自定义属性的逻辑
  const handleSave = () => {
    // 做一些处理后再调用onSaveChanges
    onSaveChanges();
  };
  
  // 把剩下的domProps传给原生元素
  return <div {...domProps}>
    <button onClick={handleSave}>保存</button>
  </div>;
};

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