ReactJS 导入工具函数报错：'import'和'export'仅允许出现在代码顶层

错误根因 #

ES 模块化语法明确规定，import 和 export 语句只能出现在 JS 文件的最顶层作用域，不允许嵌套在函数、条件判断、循环等块级作用域内部。你当前把 export default dataToExport 写在了 myFunc 函数内部，因此触发了解析错误。

除此之外你的代码还有两个隐含问题：

• 函数内引用的 dateToString 变量未定义，运行时会触发引用错误
• 你当前的函数逻辑没有返回值，调用后无法给 <td> 渲染内容

修改方案 #

方案1：函数直接返回格式化时间字符串（适配你现有调用逻辑） #

如果你的需求是调用 myFunc 直接得到可渲染的时间文本，把 Utils.js 代码修改为如下即可：

export function myFunc(inputDate) {
    const dateToTime = date => date.toLocaleString('en-GB');
    const dateString = `${inputDate}Z`;
    const localDate = new Date(dateString);
    // 函数内直接返回需要的结果，不要写export语句
    return dateToTime(localDate);
}

你另一文件中的导入、调用代码无需修改即可正常运行。

方案2：函数返回多个内部变量（如果你需要暴露函数内的多个方法/值） #

如果确实需要把 dateToTime、localDate 等变量都返回，修改 Utils.js 代码如下：

export function myFunc(inputDate) {
    const dateToTime = date => date.toLocaleString('en-GB');
    // 补全之前缺失的dateToString方法定义
    const dateToString = date => date.toISOString().split('T')[0];
    const dateString = `${inputDate}Z`;
    const localDate = new Date(dateString);
    // 直接return对象，不要在函数内写export
    return { dateToTime, dateToString, localDate }; 
}

对应调用代码需要调整为：

<td>{myFunc(order.data.created_at).dateToTime(myFunc(order.data.created_at).localDate)}</td>

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