安装tsparticles后React项目App.js创建组件与容器的报错排查

错误1：模块路径匹配失败（Can't resolve './Components/Ranks/Rank'） #

按以下步骤排查修复：

• 核对文件结构：确认src/Components/Ranks/目录下存在Rank.js或Rank.jsx文件，文件名大小写必须和导入语句完全一致（即使Windows系统不区分大小写，React打包时会严格校验）。
• 简化路径（可选）：如果Ranks文件夹内的组件文件命名为index.js，可以直接用import Rank from "./Components/Ranks";导入，无需指定文件名。

错误2：缺失第三方依赖（Can't resolve 'react-tilt'） #

直接安装缺失的依赖包：
在项目根目录打开终端，执行命令：

npm install react-tilt
# 或使用yarn
yarn add react-tilt

安装完成后重启开发服务器即可解决该错误。

正确创建组件与容器的规范 #

1. 组件目录结构 #

在src目录下创建Components文件夹，每个独立组件单独占用一个子文件夹，示例结构：

src/
└── Components/
    ├── Navigations/
    │   ├── Navigation.js
    │   └── Navigation.css
    ├── Logos/
    │   ├── Logo.js
    │   └── Logo.css
    ├── ImageLinkForm/
    │   ├── ImageLinkForm.js
    │   └── ImageLinkForm.css
    └── Ranks/
        ├── Rank.js
        └── Rank.css

2. 组件编写与导出 #

每个组件文件使用默认导出，示例（以Logo.js为例）：

import React from 'react';
import Tilt from 'react-tilt';
import './Logo.css';

const Logo = () => {
  return (
    <Tilt className="tilt-container" options={{ max: 55 }}>
      {/* 组件内容 */}
    </Tilt>
  );
};

export default Logo;

3. 组件导入与使用 #

在App.js中导入组件时，路径对应文件位置，可省略.js/.jsx后缀；同时移除组件标签外冗余的大括号，优化后的App.js部分代码：

// 导入部分
import Navigation from "./Components/Navigations/Navigation";
import Logo from "./Components/Logos/Logo";
import ImageLinkForm from "./Components/ImageLinkForm/ImageLinkForm";
import Rank from "./Components/Ranks/Rank";

// 返回部分
return (
  <div className="App">
    {init && <Particles options={particlesConfig} />}
    <Navigation />
    <Logo />
    <Rank />
    <ImageLinkForm />
  </div>
);

内容的提问来源于stack exchange，提问作者Abdulhafis Bamidele