React组件间代码复用方案咨询：替代Mixin的可行方式

针对你遇到的这种重复代码复用场景，其实普通JavaScript模块是最简单且最推荐的选择——毕竟你的toggleBodyClass本质就是一个和React无关的纯工具函数，完全不需要依赖特定的React复用构造。

方案一：普通JS工具模块（最推荐） #

这是最直接的实现方式，完全符合React现在倡导的「组合优于混入/继承」的理念：

1. 新建一个工具文件（比如src/utils/bodyClass.js），把复用函数抽离进去：

export function toggleBodyClass(className, e) {
  e.preventDefault();
  document.body.classList.toggle(className);
}

2. 在需要的组件中导入并调用：

import { toggleBodyClass } from '../utils/bodyClass';

class Header extends Component {
  sidebarToggle(e) {
    toggleBodyClass('sidebar-hidden', e);
  }

  sidebarMinimize(e) {
    toggleBodyClass('sidebar-minimized', e);
  }

  // 其他组件逻辑...
}

这种方式的优势很明显：

• 完全解耦，函数可以在任何JavaScript环境中复用，不局限于React组件
• 代码结构清晰，维护成本极低
• 没有引入额外的React概念，学习和使用成本都很低

方案二：自定义Hook（函数组件场景） #

如果你的项目已经全面转向函数组件+Hook的写法，也可以把这个逻辑封装成自定义Hook——不过对于当前这个简单场景来说有点“过度设计”，但如果后续需要扩展相关逻辑（比如监听窗口变化、管理多个类名的状态），Hook会更灵活：

import { useCallback } from 'react';

export function useBodyClassToggle() {
  // 用useCallback缓存函数，避免不必要的重渲染
  const toggleBodyClass = useCallback((className, e) => {
    e.preventDefault();
    document.body.classList.toggle(className);
  }, []);

  return toggleBodyClass;
}

然后在函数组件中使用：

import { useBodyClassToggle } from '../hooks/useBodyClassToggle';

function Header() {
  const toggleBodyClass = useBodyClassToggle();

  const sidebarToggle = (e) => {
    toggleBodyClass('sidebar-hidden', e);
  };

  const sidebarMinimize = (e) => {
    toggleBodyClass('sidebar-minimized', e);
  };

  // 组件渲染逻辑...
}

不推荐的方案：高阶组件（HOC）或渲染属性 #

对于这种简单的工具函数逻辑，HOC和渲染属性会增加不必要的复杂度，除非你需要给组件注入更多和类名管理相关的状态或方法，否则完全没必要使用它们。

总结一下：优先选择普通JS工具模块，它是最适配你当前场景的方案；如果是函数组件且有后续扩展需求，再考虑自定义Hook。

内容的提问来源于stack exchange，提问作者Dónal