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

Question

我制作了一个自定义挂钩来包裹 Chakra 的自定义挂钩。 Chakra UI 是一个组件库。

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;
};

如您所见，我需要告诉 Chakra 使用我的 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;
};

The question is, is it okay to call a functional component in a custom hook?

你好像特指render函数。因此，returns JSX 渲染函数的使用似乎是完全有效的。据我所知，你关于功能组件的问题是无关紧要的。您正在定义一个 returns JSX.

的函数

见Custom Component

If so, I need to change the extension of my custom hook file from *.ts to *.tsx. Is it okay as well?

我看不出有什么问题。 *.jsx and *.tsx (vs *.js and *.ts) 仅表示文件中使用了 JSX 语法。 Rules of Hooks 没有制定任何规则来管理可以在其中声明它们的文件，而是只制定如何使用它们的规则。

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

Can I call a functional component inside a custom hook? Is it okay for such a hook to be a .tsx, not .ts files?

reactjs

react-hooks

react-functional-component

react-typescript

react-custom-hooks