如何在 React 类组件中导入函数以多次使用它？答案

【问题标题】：how to import a function in react class component to using it multiple times?如何在 React 类组件中导入函数以多次使用它？
【发布时间】：2023-01-23 20:41:21
【问题描述】：

例如我想添加一个功能返回或做这样的事情：

export const useExample = (name) => {
  const script = "hi" + name;
  return script
};

我想用它类组件所以应该是这样的：

import React from 'React'
import {useExample} from "components/utils/useExample"

class App extends React.Component {

componentDidMount(){
  const hiMsg = useExample('John')
  console.log(hiMsg)
}
render(){
  return(
  <>
   <div>THIS IS AN EXAMPLE</div>
  </>
   )
}
}

这会给一个错误像这样： (https://i.stack.imgur.com/r7mx0.png)

我知道我们不能在类组件中使用钩子，那么这个的**修复**是什么问题使使用示例作品？

我只想知道如何导入外部文件，例如接受参数并对其执行某些操作的函数，以及如何在 React 类组件中多次使用该文件

【问题讨论】：

useExample 是否调用任何钩子（例如，useState、useEffect）？如果不是，则只需更改名称，使其不以 use 开头，这样 lint 规则就不会认为它是自定义挂钩。
正如错误已经指出的那样，您不应该在类组件中使用挂钩。钩子用于功能组件。如果您首先不需要使用挂钩，则可以重命名该方法，使其不以 use 开头。如果确实需要使用钩子，则可以创建一个 HOC 组件，将钩子返回值作为 prop 传递给类组件
您不能在类组件中使用挂钩。函数的名称use... 暗示它就是这样。如果不是钩子，请更改名称。

标签： javascript reactjs class react-hooks react-class-based-component

【解决方案1】：

只是不要在函数名中使用use，所以它不会认为它是一个钩子函数。

类似于 getGreeting 而不是 useExample。

【讨论】：

【解决方案2】：

您只能以这种方式导出使用关键字 function 声明的函数。如果您使用 const 导出文件底部的函数，如下所示：

export {useExample}

或者如果您在同一个文件中有更多方法，而不是：

export {useExample, someMoreFunctions}

【讨论】：