反应 - 无法从另一个 js 文件导入对象

Posted 2023-02-22

【中文标题】反应 - 无法从另一个 js 文件导入对象

【英文标题】：react - not able to import object from another js file

【发布时间】：2022-01-03 14:26:37

【问题描述】：

响应式.js

import  useMediaQuery  from "react-responsive";

export default 
  sm: useMediaQuery( maxWidth: 768 ),
  md: useMediaQuery( minWidth: 769, maxWidth: 1024 ),
  lg: useMediaQuery( minWidth: 1025 ),
;

当我尝试将其导入App.js时

import sm,md,lg from "../../responsive"

发生错误：

export 'lg' (imported as 'lg') was not found in '../../responsive' (possible exports: default)

怎么了？

更新

我发现还有一个错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at Object.useContext (react.development.js:1484)
    at useDevice (react-responsive.js:57)
    at useMediaQuery (react-responsive.js:95)
    at Module../src/responsive.js (responsive.js:3)

我改到下面之后

import  useMediaQuery  from "react-responsive";

const sm = useMediaQuery( maxWidth: 768 );
const md = useMediaQuery( minWidth: 769, maxWidth: 1024 );
const lg = useMediaQuery( minWidth: 1025 );

export  sm, md, lg ;

【问题讨论】：

import sm,md,lg from "../../responsive" 应该可以工作

【参考方案1】：

您可以使用default 导出或named 导出。

使用default 导出，这就是您的问题。

import responsive from '../../responsive';

console.log(responsive.sm);

您也可以使用named 导出。

export const sm = "foo";
export const md = "bar";
export const lg = "baz";

和import他们通过：

import  sm, md, lg  from '../../responsive';

---

您在 React 组件外部使用钩子时遇到的问题是因为您在组件外部使用 useMediaQuery（钩子），可以通过创建自定义、可重用的钩子轻松解决此问题。

const useMeasurements = () => 
  return 
    sm: useMediaQuery( maxWidth: 768 ),
    md: useMediaQuery( minWidth: 769, maxWidth: 1024 ),
    lg: useMediaQuery( minWidth: 1025 )
  
;

在您的组件内部，您可以像这样使用它：

const MyComponent = () => 
  const  sm, md, lg  = useMeasurements();
;

【讨论】：

请查看我上面的更新

【参考方案2】：

您必须按如下方式导入默认导出：

import sm,md,lg from "../../responsive";

【讨论】：

我不认为这是正确的。默认导出是封装这三个值的对象。所以，OP的语法是正确的。

请查看我上面的更新

【参考方案3】：

这两种选择都应该有效： import responsive from '../../responsive';

import  useMediaQuery  from "react-responsive";

const sm = useMediaQuery( maxWidth: 768 );
const md = useMediaQuery( minWidth: 769, maxWidth: 1024 );
const lg = useMediaQuery( minWidth: 1025 );

export  sm, md, lg ;

关于钩子错误，这里有同样的问题，有答案： Invalid hook call. Hooks can only be called inside of the body of a function component

【讨论】：

请查看我上面的更新

查看这个问题：***.com/questions/56663785/…

【参考方案4】：

你在函数外调用useMediaQuery钩子，这与React Hook rule相反。

所以你可以通过创建另一个自定义钩子并用它包装来实现这一点。

// useGrid.js
import  useMediaQuery  from "react-responsive";

const useGrid = () => 
    const sm = useMediaQuery( maxWidth: 768 );
    const md = useMediaQuery( minWidth: 769, maxWidth: 1024 );
    const lg = useMediaQuery( minWidth: 1025 );
    return  sm, md, lg 

export  useGrid 

现在在您的文件中，您可以简单地使用它：

// component.js
import  useGrid  from "./useGrid"

const CustomComponent = () => 
    const  sm, md, lg  = useGrid();
  ;