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

Question

我有两个组件，一个组件将一些func作为道具传递给另一个组件，我不确定什么是正确的方法来做到这一点，而不必接收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>

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

Answer 1

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

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

<ComponentB>
    doSmth={doSmthHandlerWrapper}
</ComponentB>