我可以在自定义钩子中调用功能组件吗？这样的钩子可以成为.tsx，而不是.ts文件吗？

Question

我做了一个定制的钩子，包裹着脉轮的定制钩子。Chakra是一个组件库。

export const useToast = () => {
  const chakraToast = useChakraToast();

  // ...

  const toast = ({ id, title, delay, position = `bottom-right` }: Options) => {
    return chakraToast({
      id,
      position,
      duration: null,
      render: ({ onClose }) => (<Toast title={title} onClose={onClose} />)
    });
  };

  // ...

  return toast;
};

如你所见，我需要告诉脉轮使用我的烤面包组件。问题是，调用自定义钩子中的功能组件可以吗？如果是这样，我需要将自定义钩子文件的扩展名从.ts更改为.tsx。也可以吗？

谢谢!

Answer 1

给予：

export const useToast = () => {
  const chakraToast = useChakraToast();

  // ...

  const toast = ({ id, title, delay, position = `bottom-right` }: Options) => {
    return chakraToast({
      id,
      position,
      duration: null,
      render: ({ onClose }) => (<Toast title={title} onClose={onClose} />)
    });
  };

  // ...

  return toast;
};

问题是，调用自定义钩子中的功能组件可以吗？

您似乎专门指的是render函数。因此，它似乎完全有效地使用了一个返回JSX的呈现函数。据我所知，您关于函数组件的问题是不相关的。您正在定义一个返回JSX的函数。

请参阅自定义组件

如果是这样，我需要将自定义钩子文件的扩展名从*.ts更改为*.tsx。也可以吗？

我看不出有什么问题。*.jsx和*.tsx (vs *.js和*.ts)只表示在文件中使用了JSX语法。钩子规则不制定任何规则来规范可以在其中声明的文件，而是只制定如何使用这些文件的规则。