reactjs - 如何在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文件的最优方案是什么？

Answer 1

不确定这是否有用，但我最近建立了一个网站，在该网站上，我必须根据 prop 为页面中的内容动态加载 markdown 文件:

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

然后在我的组件中我会做:

const introText = getMarkdown(page)

然后渲染{introText}

您可以使用 url 参数中的 id 对您的 json 文件执行异步要求吗？