在函数内使用钩子

Question

我是 React 和 JS 的初学者。我想重构和清理我的无休止的文件，并将文件分成不同的任务。 因此，我创建了一个 lib 文件夹并创建了一个名为calculatePercentage.js 的文件，我想在其中使用 useContext 挂钩。这怎么可能实现？我需要创建一个组件吗？

这是不可能的：

import { addDays, differenceInCalendarDays } from "date-fns";
import { useContext } from "react";
import { TimelineSettingsContext } from "../TimelineSettingsProvider";

// Function to calculate the percentage difference between two dates
export function calculatePercentage(startDate, endDate) {
  const { timelineStart, timelineLength, timelineScale } = useContext(
    TimelineSettingsContext
  );
  //wenn startDate vor dem TimelineStart liegt, dass muss der Balken verkürzt werden und startet bei timelineStart
  startDate =
    differenceInCalendarDays(timelineStart, startDate) < 0
      ? startDate
      : timelineStart;
  const startPosition =
    (differenceInCalendarDays(startDate, timelineStart) / timelineLength) *
    timelineScale;
  const width =
    (differenceInCalendarDays(addDays(endDate, 1), startDate) /
      timelineLength) *
    timelineScale;
  return { startPosition, width };
}

Answer 1

是的，正如您所注意到的，您不能在函数中使用钩子。 React hook 只能在函数组件内部或从另一个自定义 hook 调用。因此，在处理非 JSX 返回时，您将创建另一个钩子，您可以在其中调用需要使用的钩子。所以在这种情况下你可能会写类似的东西

export function useCalculatePercentage(startDate, endDate) {
  const { timelineStart, timelineLength, timelineScale } = useContext(
    TimelineSettingsContext,
  );
  // ...
  return { startPosition, width };
}

然后你就有了一个新的钩子，你可以用它来获取你需要的百分比值。并且再次需要在函数组件或另一个钩子中调用。