解决React类组件调用带参外部函数的Hook报错问题

错误的核心原因是React会把所有以use开头的函数识别为Hook——哪怕你的函数只是普通工具函数，也会触发Hook的使用规则校验，而类组件里不能调用Hook，所以才会报错。

要解决这个问题很简单，只需要两步：

1. 修改工具函数的命名（去掉use前缀） #

把原来的useExample改成普通的函数名，比如getHiMessage，同时更新导出语句：

// components/utils/useExample.js（文件名可保留，也可同步修改）
export const getHiMessage = (name) => {
  const script = "hi" + " " + name;
  return script;
};

2. 更新类组件中的导入与调用 #

把导入的函数名改成新的，然后正常在类组件的方法里调用即可：

import React from 'React'
// 导入改名后的函数
import { getHiMessage } from "components/utils/useExample"

class App extends React.Component {
  componentDidMount(){
    const hiMsg = getHiMessage('John')
    console.log(hiMsg) // 输出 "hi John"
  }
  render(){
    return(
      <>
       <div>THIS IS AN EXAMPLE</div>
      </>
    )
  }
}

如果不想改动原有函数名（比如已有其他函数组件在使用useExample），也可以用别名导出/导入：

// 工具文件中新增别名导出
export const useExample = (name) => {
  const script = "hi" + " " + name;
  return script;
};
export const getHiMessage = useExample;

// 类组件里导入别名
import { getHiMessage } from "components/utils/useExample"

这样既保留了原有的useExample供函数组件使用，又能让类组件通过别名正常调用这个工具函数。

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