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

Question

响应式.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 };

Answer 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();
};

Answer 2

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

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

Answer 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

Answer 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();
  };