如何在javascript中更改json文件导入路径

Question

嗨，下面是正在工作的内容以及我需要更改的内容。我在我的SCR文件夹下有一个用于测试目的的数据文件夹，其中有许多json文件。

实际上，我有很多react列表组件，我想通过传递json文件名和路径而不是硬编码，将其更改为只有一个通用组件。这适用于

import React from 'react'
import { Link } from 'react-router-dom'
import * as s from '../../components/Shared/ListCards.styles'
import ListData from '../../data/user.json'
const ListCards = () => {
const listJSX = ListData.map((user, index) => {
return ()

我想换

import ListData from '../../data/user.json'
to
import ListData from 'path/filename.json'

路径和文件名存储在本地存储中

localStorage.getItem('colName')

Answer 1

您可以使用动态导入

const { default: ListData } = await import('path/filename.json');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

---

如果存储在本地存储中的路径与URL:相关，您可能需要考虑使用fetch api

const ListCards = () => {
const { listData, setListData } = useState([]);
(async () => {
const response = await fetch('/urlpath/filename.json')
const data = await response.json()
setListData(data)
})();
const listJSX = listData.map((user, index) => {
return ()