ReactJS中如何设置导出对象的键名为带空格的双词组合？

• JavaScript对象字面量中，带空格的标识符无法使用简写语法：你之前使用的Apple这类写法属于「对象属性简写」，要求键名和对应的变量名完全一致，而JavaScript变量命名规则不允许包含空格，因此Blue Apple这种写法本身不符合语法规范。
• 你尝试给键名加双引号但未生效，是因为只修改了键名，没有显式声明对应的值，简写语法在键名带引号的场景下不会自动匹配变量。

步骤1：调整导出代码 #

保持导入语句不变，修改导出的对象为显式键值对写法：

import * as apple from './Apple.json';
import * as orange from "./Orange.json";
import * as pear from "./Pear.json";

export default {
  "Blue Apple": apple,
  "Red Orange": orange,
  "Black Pear": pear
}

步骤2：调整导入后的访问语法 #

导入这个配置对象后，不能用点语法访问带空格的键，需要使用方括号语法：

import fruitConfig from './你导出文件的路径.js';

// 正确访问方式
const blueApple = fruitConfig['Blue Apple'];

// 错误写法，会触发语法报错
// const blueApple = fruitConfig.Blue Apple;

如果你的项目接入了TypeScript或者其他类型校验工具，需要同步调整对应导出对象的类型声明，把带空格的键名加入类型定义即可。

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