1

我做了一个定制的钩子，包裹着 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。也可以吗？

谢谢！

4

1 回答 1

2

鉴于：

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. 也可以吗？

我认为这里没有问题。*.jsxand *.tsx( vs *.jsand*.ts ) 仅表示文件中使用了 JSX 语法。Hooks规则没有对可以在其中声明它们的文件进行管理，而只是对它们的使用方式进行了管理。

于 2022-02-11T05:05:40.407 回答