React无法从其他JS文件导入对象及react-responsive无效Hook调用问题

第一个报错（导出项找不到）的原因 #

你初始的responsive.js使用的是export default默认导出的对象，但是App.js中使用的是具名导入的语法，两种导出导入规则不匹配，因此会触发找不到对应导出项的报错。
如果仅要解决导入匹配问题，有两种修改方式：

• 方式1：保持默认导出不变，修改导入语法

import responsive from "../../responsive"
// 使用时解构属性即可：const {sm, md, lg} = responsive

• 方式2：保持导入语法不变，把默认导出改为具名导出，也就是你后续修改的写法，但该写法会触发第二个Hook调用报错。

第二个报错（无效Hook调用）的原因 #

React Hook仅允许在函数组件顶层、或者自定义Hook的顶层调用，你不管是初始的默认导出写法，还是后续修改的具名导出写法，都是在JS模块的顶层直接调用useMediaQuery这个Hook，不属于规则允许的调用场景，因此会直接触发规则报错。

最终正确实现方案 #

将响应式判断逻辑封装成自定义Hook导出，调用时在函数组件顶层执行即可：

// responsive.js 正确代码
import { useMediaQuery } from "react-responsive";

export default function useResponsive() {
  const sm = useMediaQuery({ maxWidth: 768 });
  const md = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
  const lg = useMediaQuery({ minWidth: 1025 });
  return { sm, md, lg }
}

App.js中使用方式：

import useResponsive from "../../responsive"

function App() {
  // 必须在组件顶层调用自定义Hook
  const {sm, md, lg} = useResponsive()
  // 后续可正常使用三个断点变量
}

内容的提问来源于stack exchange，提问作者CCCC