如何在 TypeScript 中返回 ReactNative 功能组件的高阶函数中使用钩子？

Question

让我从我试图重构的工作代码开始。我正在尝试抽象按钮创建，无论我尝试什么，我都会收到“只能在功能组件的主体内部调用挂钩”错误。

按照教程，我设置了一个导航栏和一个按钮，可将我从主屏幕转到“详细信息”屏幕。以下是有效的：

const DetailsButton = (): JSX.Element => {
  const navigation = useNavigation();

  return (
    <Button title="Details" onPress={() => navigation.navigate('Details')} />
  );
};

// And then later on...

<Stack.Screen name="Home" 
              component={HomeScreen} 
              options={{ title: 'Master', headerRight: DetailsButton }} />

该按钮将毫无问题地将我带到详细信息屏幕。但后来我开始想我可以将它重构为一种按钮工厂函数：

interface BarButtonProps {
  title: string, 
  destination: string,
};

const BarButton = (buttonProps: BarButtonProps): () => JSX.Element => {
  const navigation = useNavigation();

  return (): JSX.Element => (
    <Button title={buttonProps.title} onPress={() => navigation.navigate(buttonProps.destination)} />
  );
}

const DetailsButton = BarButton({title: 'Details', destination: 'Details'});

我的计划是像以前一样使用DetailsButton 组件。但是，当我尝试运行代码时，我得到了钩子错误。我以为我明白了原因，所以我尝试了以下变体：

const BarButton = (buttonProps: BarButtonProps): () => JSX.Element => {
  return (): JSX.Element => (
    <Button title={buttonProps.title} onPress={() => useNavigation().navigate(buttonProps.destination)} />
  );
}

在我看来，钩子现在似乎在功能组件中。但这只能让我到达主屏幕。当我按下按钮时，我再次收到相同的钩子错误。我一定漏掉了一些微妙的地方。

是否有可能创建一个像这样的高阶函数，一个使用钩子的函数，还是我在尝试一些不可能的事情？如果可能的话，有人可以告诉我什么会起作用吗？谢谢。

Answer 1

你已经很接近了。你的工厂应该是这样的：

const ButtonFactory = (props: ButtonProps): () => JSX.Element => {
  const { title, destination } = props;

  const MyButton = (): JSX.Element => {
    const navigation = useNavigation();

    return (
      <Button title={title} onPress={() => navigation.navigate(destination)} />
    );
  }

  return MyButton;
};

export const DetailsButton = ButtonFactory({ title: 'Details', destination: 'Details' })

Answer 2

当前设置的问题是 useNavigation 钩子在您调用 BarButton({title: 'Details', destination: 'Details'}) 的位置执行，而不是在您调用 <DetailsButton/> 的位置。

当BarButton函数被调用时，你调用useNavigation然后返回一个函数组件。这违反了钩子的规则。您需要移动 useNavigation 挂钩，以便在创建的组件内部调用它。

只需重新排列行的顺序：

const BarButton = (buttonProps: BarButtonProps): () => JSX.Element => {
    return (): JSX.Element => {
        const navigation = useNavigation();
        return (
            <Button title={buttonProps.title} onPress={() => navigation.navigate(buttonProps.destination)} />
        );
    }
}

---

就我个人而言，我会用小写的名称写工厂，以表明这是一个创建组件而不是组件本身的函数。

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

interface BarButtonProps {
  title: string;
  destination: string;
}

const createBarButton = ({title, destination}: BarButtonProps) => (): JSX.Element => {
  const navigation = useNavigation();
  return (
    <Button
      title={title}
      onPress={() => navigation.navigate(destination)}
    />
  );
};

const DetailsButton = createBarButton({
  title: 'Details',
  destination: 'Details',
});