如何在 ReactJS 中使用公共文件夹中的文件？

在 ReactJS 中，公共文件夹中存储了一些静态资源，如图片、样式表、JavaScript 文件等。在组件中使用这些资源可以增加代码的可读性和可维护性，同时也可以加快文件加载速度。本文将介绍在 ReactJS 中使用公共文件夹中的文件的方法。

方法一：使用相对路径

在 ReactJS 中，可以直接使用相对路径引入公共文件夹中的文件。例如，我们在 public 文件夹中创建了一个 images 文件夹，其中存放了 logo.png 图片，想要在组件中使用这个图片，可以这样写：

import React from 'react';

function MyComponent() {
  return (
    <div>
      <img src="./images/logo.png" alt="logo" />
    </div>
  );
}

这里的 ./ 表示相对于当前组件的路径，可以根据实际情况进行调整。

方法二：使用 publicUrl

ReactJS 提供了一个环境变量 PUBLIC_URL，可以用来引用公共文件夹中的文件。例如，我们在 public 文件夹中创建了一个 js 文件夹，其中存放了 my-script.js 文件，想要在组件中使用这个文件，可以这样写：

import React from 'react';

function MyComponent() {
  return (
    <div>
      <script src={process.env.PUBLIC_URL + '/js/my-script.js'}></script>
    </div>
  );
}

这里的 process.env.PUBLIC_URL 就是公共文件夹的根路径，可以拼接上相对路径来引用文件。

方法三：使用绝对路径

如果项目中有多个文件夹需要使用公共文件夹中的文件，可以使用绝对路径来引用文件。例如，我们在 public 文件夹中创建了一个 css 文件夹和一个 images 文件夹，想要在 src/components 文件夹下的组件中使用这些文件，可以这样写：

首先，在项目根目录下创建一个 .env 文件，添加如下内容：

PUBLIC_URL=/my-app/

然后，在 src 文件夹下创建一个 constants.js 文件，添加如下内容：

export const PUBLIC_URL = process.env.PUBLIC_URL;

最后，在组件中使用绝对路径来引用文件：

import React from 'react';
import { PUBLIC_URL } from '../constants';

function MyComponent() {
  return (
    <div>
      <link rel="stylesheet" href={PUBLIC_URL + 'css/my-style.css'} />
      <img src={PUBLIC_URL + 'images/logo.png'} />
    </div>
  );
}

这里的 PUBLIC_URL 就是公共文件夹的根路径，可以直接拼接上相对路径来引用文件。

以上三种方法都可以在 ReactJS 中使用公共文件夹中的文件，选择适合自己项目的方法即可。