React开发WordPress区块时如何导入访问外部嵌套数组/对象

首先这种代码拆分的方式是完全可行的，你现在的导出导入语法本身没有错误，功能失效通常是以下几个常见原因导致的：

1. 导入路径不匹配 #

请先确认block_template.js和主文件的相对位置是否正确：

• 如果两个文件在同一级目录下，你现在的./block_template路径是正确的，部分没有配置自动识别.js后缀的构建环境需要补全后缀，改成import { BLOCKS_TEMPLATE } from "./block_template.js";即可
• 如果模板文件在下级目录，比如放在src/utils/block_template.js，主文件在src/index.js，导入路径需要对应改成./utils/block_template

2. 没有重新编译代码 #

WordPress区块开发需要经过编译才能在浏览器生效，修改抽离的文件后需要重新执行构建命令：

• 如果是开发模式，执行npm start（对应@wordpress/scripts的启动命令）开启热更
• 如果是生产打包，执行npm run build重新生成打包后的文件，再刷新后台页面测试

验证方法 #

你可以在主文件导入语句后加一行打印代码，确认常量是否正确导入：

import { BLOCKS_TEMPLATE } from "./block_template";
console.log(BLOCKS_TEMPLATE); // 打开浏览器控制台查看是否输出正确的模板数组

如果控制台输出undefined，就优先排查路径和编译问题；如果能正常输出数组，说明导入没有问题，可进一步排查其他业务逻辑。

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