导出具有 Material-UI 主题支持的辅助函数

Question

我想创建一个新文件，其中包含多个使用相同逻辑的组件的辅助函数， 问题是我需要在该文件中使用我的locale.ts 文件来根据主题使用当前语言（本地化） 但似乎我无法在 ts 文件中调用 const t: any = useTheme().props。 （错误：React Hook "useTheme" 不能在顶层调用。必须在 React 函数组件或自定义 React Hook 函数中调用 React Hooks）

今天在我的 tsx 组件文件中：

t: any = useTheme().props
t.General.someString

如何在我的辅助函数文件中使用 Material-UI 主题的本地化？

Answer 1

Hook 不能在顶层使用，这是不支持的：

// top level
const any = useTheme().props;

它应该在功能组件或其他钩子中使用。参考hookhere的规则：

function Component() {
  // valid because it's inside a React function
  const any = useTheme().props;
  return (...);
}

你可以做的是创建一个帮助钩子来返回你需要的特定数据：

const useThemeProps = () => {
  // valid because it's inside another hook
  return useTheme().props;
}

function Component() {
  const any = useThemeProps();
  return (...);
}

你也可以直接返回数据：

function Component() {
  const { props } = useTheme();
  return (...);
}