前端问题求助，无法导出组件
下列代码，显示报错信息Attempted import error: 'Counter' is not exported from './obex.js'.，说我没有导出Counter，可我已经导了，是因为observer包裹的有特定的导出方式还是我语法写错了？import { observer } from "mobx-react-lite";
import React from "react";
function Counter({ counterStore }) {
return (
<div>
<p className="paragraph">{counterStore.count}</p>
<button onClick={() => counterStore.increment()} className="button">加 1</button>
<button onClick={() => counterStore.reset()} className="button">重置</button>
</div>
)
}
export default observer(Counter)
额，发现问题了，是外面用花括号import不行，有没有大佬解释一下加不加花括号的区别啊 看起来你已经正确导出了 `Counter` 组件，并使用 `mobx-react-lite` 的 `observer` 函数进行了包裹。报错信息提示可能与你组件的导入或者导出方式不一致导致的。需要检查以下几点：
1. **确保导入路径正确**：检查你导入 `Counter` 的路径是否为 `./obex.js`，是否与文件名一致。此外，确认文件名和路径区分大小写。
2. **组件导入语法**：确保在使用 `Counter` 的地方是这样导入的：
import Counter from './obex';
3. **导出格式检查**：看你的代码中是使用了默认导出 `export default observer(Counter)`，那么在导入时应不使用花括号。
4. **检查包安装和版本**：确认 `mobx-react-lite` 已经正确安装，并且版本兼容。
5. **React 语法纠错**：在组件内的 JSX 需要用花括号包裹 JavaScript 表达式，例如 `onClick` 的使用方式应如下：
return (
<div>
<p>{counterStore.count}</p>
<button onClick={() => counterStore.increment()} className="button">加 1</button>
<button onClick={() => counterStore.reset()} className="button">重置</button>
</div>
);
尝试按照以上建议进行检查和修改，看看是否能解决问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]