如何在ReactJS组件中动态加载JSON？

Question

URL是动态的

url/:id/:name（使用Reach Router）

url/1/name1  
url/2/differnet-link  
url/3/another-link

在文章组件中，如果URL是url/1/name1，我想要加载1.json，或者如果URL ID是2，则加载2.json。

import menuArray from '../data/menu.json';

这是我通常在ReactJS中加载JSON的方式

class Article extends React.Component {
    constructor(props) { 
       super(props);
       if(/* id is available in the menuArray */) {
          // I want to load the JSON by id and store it in state
       }  
    } 
}

在ReactJS中加载动态JSON文件的最佳解决方案是什么？

- Mahesh

---

根据Reach Router文档，URL参数应该作为props可用？因此理论上你应该在你的文章中有一个可用的props.id？ - Jon B

是的，我可以从props中获取id。但是如何在构造函数内导入JSON？ - Mahesh

Answer 1

不确定这是否有用，但我最近建立了一个网站，我必须根据属性动态加载页面中的Markdown文件以获取内容：

const getMarkdown = async (page) => {
  const markdownFilePath = `./content/${page}.md`
  const markdownFile = await require(`${markdownFilePath}`)
  return markdownFile
}

然后在我的组件中，我会这样做：

const introText = getMarkdown(page)

然后渲染{introText}

您可以使用URL参数中的ID，通过异步 require 加载JSON文件来完成相同的操作？

- Jon B

---

我认为这就是我想要的。完成工作后，我会分享我的评论。 - Mahesh

嗨，@Mahesh，只是想知道最终这个问题解决了吗？ - Jon B

Answer 2

更好的方法是创建一个 .js 文件，然后使用 const，例如：data.js。

const navigation = [
    {
        navItemId: 1,
        navItemName: 'About Me',
        navItemPath: '/'
    }
];
export {navigation};

如果您想在文件中使用它，请使用以下代码：

import { navigation, bio, education } from './constants';
state = {navigation: navigation}

- Noor Sheikh