React-native - 提供回调 function 作为子组件的道具时发生 Lint 错误（JSX 道具不应使用函数）

Question

我有一个父子功能组件结构，其中父组件获取要显示的数据，子组件显示数据。 我正在从子组件更新父级的 state。 我正在从父级向子级发送一个处理程序 function 作为道具，它正在调用父级的处理程序 function。 在父处理程序 function 中，我正在更新 state，但是，ESLint 抛出错误（JSX 道具不应使用函数）。 这是我到目前为止所做的：

父组件：

const [startTime, setStartTime] = useState(new Date());

const myHandler = () => {
    const tn = new Date();
    setStartTime(tn);
}
return (
    <ChildComponent myHandler={myHandler} />
);

子组件：

interface Props {
  myHandler:(params: any) => any;
}

const someAction = useCallback(
    (studentId: Student['id']) => () => {
      navigation.push(STUDENTROUTE, { studentId });
      myHandler(studentId);
    },
    [navigation]
);

问题发生在父组件上，我将处理程序 function 作为道具传递给子组件。 我在几个组件中遇到的错误是：

114:7   error    JSX props should not use functions  react/jsx-no-bind

我能做些什么来纠正这个错误？

Answer 1

您的父组件每次运行时都会创建myHandler ，linter 规则说应该避免这种情况。 仅在组件首次安装时创建一次，以便每次都传递一个 static 引用。

const myHandler = useCallback(() => {
    const tn = new Date();
    setStartTime(tn);
}, [setStartTime]);