JSX 道具不应使用箭头函数 eslint 警告 [重复]

Posted 2023-02-21

【中文标题】JSX 道具不应使用箭头函数 eslint 警告 [重复]

【英文标题】：JSX props should not use arrow functions eslint warning [duplicate]

【发布时间】：2021-05-14 07:45:52

【问题描述】：

我有两个组件，一个将一些 func 作为 prop 传递给另一个组件，我不确定在不必收到 eslint 错误的情况下执行此操作的正确方法是什么：

代码：

<Parent>
  const doSmthHandler = useCallback((id: number)=> 
   //do some stuff 
  ,[])
  <ComponentB>
     doSmth=()=>doSmthHandler(id) // Here I get eslint warning: JSX props should not use arrow functions eslint warning
  </ComponentB>
</Parent>

组件 B 接收 doSmth 属性作为函数，并有一个按钮，例如：

<Button onPress=doSmth>Do stuff</Button>

我想知道如何将一些参数传递给作为 cb 道具传递给另一个我没有得到 eslint 错误的组件！

【问题讨论】：

你试过 React 钩子 useCallback 吗？你可以找到它的文档here

我实际上已经在 callBack() 下，但警告仍然显示！

从上面的链接中看不到任何示例如何将 arg 传递给 func 而不必使用内联箭头 fn

@isnihalsi 问题是您将回调直接作为属性传递。您应该在将其传递给组件之前声明它以避免 ESLint 警告。

【参考方案1】：

您的代码的问题在于您将回调作为属性直接传递。在将其传递给组件之前，您可以使用 useCallback 将其声明为包装器，如下所示：

const doSmthHandlerWrapper = useCallback(
    () => doSmthHandler(id),
    [id]
)

<ComponentB>
    doSmth=doSmthHandlerWrapper
</ComponentB>

【讨论】：

如何在 doSmthHandlerWrapper 中传递id？

您是否在组件上声明了id（示例代码中为Parent）？如果是这样，它应该在调用时通过闭包对函数可见。

不，其实这是这里的重点，我想传递一个arg给doSmthHandlerWrapper() for ex doSmthHandlerWrapper(1)

你能提供一个更广泛的代码版本的 sn-p，显示你想要做什么吗？

看来我可以像