ReactJS中文件路径转URL及从URL加载JSON文件的实现方法

嘿，我来帮你搞定这两个React相关的问题！

在React里处理本地文件路径转URL，主要有两种常见场景，取决于你的文件存放位置：

• 如果文件在src目录下：直接通过import导入即可，Webpack会在构建时自动将其处理成可访问的URL（如果需要直接使用URL而非解析后的内容，直接导入路径即可）：

  // 导入并解析JSON内容
  import chordJson from '../../assets/chord.json';
  // 仅获取文件的访问URL
  import chordJsonUrl from '../../assets/chord.json';
  

• 如果文件在public目录下：使用process.env.PUBLIC_URL拼接路径，这个变量会自动指向React应用的根URL，确保生产环境路径也能正常访问：

  const chordJsonUrl = `${process.env.PUBLIC_URL}/assets/chord.json`;
  

你当前用require导入本地JSON的方式是静态构建时导入，Webpack会在打包阶段就把文件整合进代码里。要换成远程URL加载，需要在组件运行时发起网络请求，以下是适配你类组件的解决方案：

修改步骤： #

1. 移除原来的静态导入代码：

   // 删掉这一行：const TAXONOMY_DATA = require(../../assets/chord.json);
   

2. 更新组件state，新增存储远程数据、加载状态的字段：

   constructor(props) {
     super(props);
     this.state = { 
       selectedOptions: [],
       taxonomyData: null, // 存远程JSON数据
       isLoading: true,     // 标记加载状态
       error: null          // 存储请求错误信息
     };
   }
   

3. 在componentDidMount生命周期里发起网络请求：

   componentDidMount() {
     // 替换成你的实际远程JSON文件URL
     const jsonRemoteUrl = 'https://your-domain.com/path/to/chord.json';
   
     fetch(jsonRemoteUrl)
       .then(response => {
         if (!response.ok) {
           throw new Error(`请求失败：${response.status}`);
         }
         return response.json();
       })
       .then(data => {
         this.setState({
           taxonomyData: data,
           isLoading: false
         });
       })
       .catch(error => {
         this.setState({
           error: error.message,
           isLoading: false
         });
         console.error('加载JSON出错：', error);
       });
   }
   

4. 渲染时处理不同状态（加载中、加载失败、数据就绪）：

   render() {
     const { taxonomyData, isLoading, error, selectedOptions } = this.state;
   
     if (isLoading) return <div>加载中...</div>;
     if (error) return <div>加载失败：{error}</div>;
   
     // 现在可以用taxonomyData代替原来的TAXONOMY_DATA做业务逻辑
     return (
       <div>
         {/* 示例：基于远程数据渲染选项 */}
         {Object.entries(taxonomyData).map(([key, value]) => (
           <div key={key}>{value.label}</div>
         ))}
       </div>
     );
   }
   

补充说明： #

require属于静态导入，只能处理本地文件；而fetch（或axios等HTTP库）是运行时网络请求，能动态获取远程资源，刚好匹配你从URL加载JSON的需求。

内容的提问来源于stack exchange，提问作者Abdullah Yusuf Azzam