从React.js中的不同文件夹导入文件-相对路径

Question

我正在学习React.js，我在与相对路径作斗争。。。

项目结构，

-Project
-node_modules
-public
-index.html
-src
-p1
-test.json
-give.js
-loan.png

我喜欢在give.js文件中导入test.json文件，如何实现这一点，

我尝试了这种格式-import test from "./p1/test.json"，但它显示错误-Module not found

而且，我有一个疑问，将媒体文件保存在公用文件夹中是否安全？，任何提示都将非常有助于完整的

感谢

Answer 1

我认为解决这个问题的一种方法是使用require。

const test = require("./p1/test.json");

另一种方法可以是将JSON文件更改为js文件，然后导出对象。

在p1/test.js 中

const test = { your JSON };
export default test;

Answer 2

您的导入语句没有任何问题，您做得很好。问题可能出在文件类型上。

您正在尝试导入JSON文件。这是不会开箱即用的反应。

要解决此问题，请将.json文件转换为.js，其结构如下：

test.js

export default { foo: 'bar' }

give.js

import test from "./p1/test"

Answer 3

您提到的相对路径是正确的。与其使用.json的文件类型，不如使用.js的文件扩展名。

同时还要确保从test.js文件中正确导出数据。例如

test.js

export default const test = {
"test": 1
}

give.js

import test from './p1/test'

将媒体文件保存在公用文件夹中是可以接受的，但我们将它们保存在src文件夹中，以便构建系统可以缓存它们，从而提高应用程序的性能。