将内联函数转换为普通函数答案

【问题标题】：Converting inline function to normal function将内联函数转换为普通函数
【发布时间】：2021-12-08 07:19:49
【问题描述】：

我希望将以下签名的内联函数转换为非内联函数

const onMouseEnter = (itemName: string): void => {
 alert(itemName);
};

我尝试如下操作，但似乎不起作用。

function onMouseEnter(itemName: string) {
 alert(itemName);
};

这是我的代码框，它没有使用上面的签名进行编译。

https://codesandbox.io/s/frosty-buck-wt66b?file=/src/App.tsx

【问题讨论】：

对我来说似乎工作正常......
@jnpdx，嗯，取消注释行 onMouseEnter={onMouseEnter2('title')} 时你没有看到编译错误
啊，现在我明白你的意思了——我假设你想按照问题中的描述将 const onMouseEnter 更改为 function onMouseEnter。你可能想澄清一下。你不能传递一个带有参数的函数，就像你在注释行中尝试做的那样，除非结果反过来返回另一个函数。
@jnpdx，“除非结果反过来返回另一个函数”。你能告诉我这个函数是什么样子的吗？我尝试创建一个返回 lambda 的函数，但没有成功。
const onMouseEnter2 = (itemName: string) => () => { alert(itemName) };

标签： reactjs typescript lambda anonymous-function inline-functions

【解决方案1】：

我检查了您的代码框，稍加修正后它对我有用。请小心调用onMouseEnter2，就像调用第一个一样（使用事件处理程序上的箭头函数） - 否则每次渲染时都会触发该函数：

function onMouseEnter2(itemName: string){
  alert(itemName);
};

const addIcon: IIconProps = { iconName: "Add" };

export default function App() {
  return (
    <CommandButton
      //onMouseEnter={() => onMouseEnter("title")}
      onMouseEnter={() => onMouseEnter2('title')}
      iconProps={addIcon}
      text="New item"
      menuProps={menuProps}
    />
  );
}

但是我想提醒您，在功能组件中定义函数不是一个好习惯，因为每次渲染组件时都会定义它们。以下线程对此主题很有趣：

Where should functions in function components go?

【讨论】：

感谢您的参考！在最初的问题上，我想看看是否可以将 onMouseEnter2 用作常规函数（而不是内联函数）。这可能吗？
这就是我的代码中的内容。您的处理程序是内联函数的事实是因为您传递了一个参数。如果您不这样做，则会在加载时触发该功能。如果参数可以从另一个来源获得而不是传递给它可以工作的函数（来自示例中的本地状态），但这是另一个问题