react项目npm start时报错’roadhog’不是内部或外部命令

记录自己碰到这个情况是怎么解决的。

  1. npm i roadhog -g 全局安装roadhog。此安装过程终端再次报错,往下一步一步解决。
  2. npm install --global cnpm 全局安装镜像,再使用镜像去全局安装roadhog: cnpm i roadhog -g。安装镜像下载依赖的速度会比较快,个人感觉 npm下不了有的依赖但 cnpm 可以,怪网速吗?
  3. 此时再运行项目提示找不到某一个依赖,使用镜像再次安装依赖,可能之前装的以来不完整: cnpm install
  4. 我到这一步,再次运行项目,就可以跑起来了。

标题问题,以上就我个人是解决了,往下我再记录一下自己跑起来这个项目之后要继续往下做的事情。

概要:搭建一个react + antd项目,在里面跑一个文件,观察Table表头按钮控制子表展开关闭情况。

1.把我要观察的代码贴到 IndexPage.js 文件里(不一定都是这个名字,就是项目运行起来的那个页面,可以理解为首页),发现表头按钮不见了,这一步可能是 antd 样式引入有问题。

2.我在网上搜了很多 antd 样式引入相关的,发现要去配置很多东西,看得我眼花缭乱。我有下载 antd 的依赖,但是很奇怪在 package.json 中没有找到 antd。还下载了 babel-plugin-import ,不知道这个在解决 antd 样式引入问题中有没有起效果。

3.接着我在众多眼花缭乱的方法里选了一个看起来最简单的,说是有可能是 . css 文件没有引入。然后我在项目根目录下的 index.js 文件中引入 antd 的样式文件

1
import 'antd/dist/antd.css';

4.这时候有表头按钮图标了,点击它也可以控制到子表的展开关闭,但是它自身图标没有切换。一直显示为减号,审查元素发现表头的两个图标均为减号
在这里插入图片描述
表头两个图标的 display 为 none 和 inline-block ,有你没我,有我没你,审查元素中均改为 inline-block 显示出来以便观察。

5.审查子表格 + 的 class,复制到表头本该显示 + 但是显示了 - 的 class 里。

1
2
// 原本代码
className="ant-table-row-expand-icon ant-table-row-collapsed"
1
2
// 拷贝后代码
className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"

可以看到后半部分有区别,这估计是 antd 版本不一样导致。
到这里,在我自己搭建的react项目中就可以看到点击表头按钮可以控制子表展开关闭的效果了。


再再然后,把以上效果弄到开发的项目里,其中出现的问题

问题:点击子表,表头按钮会跟着切换;点击表头按钮图标也会切换,但是控制不到子表的展开关闭。

这个问题困扰了我很久,今天解决掉它我真的很开心QwQ
我把自己搭建的项目里实际运行ok的文件的开发项目中的文件多次增删代码比对后发现

1
2
// 开发项目中Table的引入
import Table from "./table";
1
2
// 改动后解决我困扰的引入
import { Table } from 'antd';

即项目文件中 Table 文件的引入是经过封装后的文件引用,不是直接从 antd 中引用,才影响了表头按钮切换图标会变化,也能打印子表数组,但是控制不了子表的展开关闭问题。


以上,解决 roadhog 报错,搭建了react项目,解决表头按钮控制子表展开关闭问题。
谢谢 CSDN Deidei??作者,在表头控制子表展开问题的解决上给了我很大的帮助,贴一下我当时找到的这篇文章,相关的代码也都写在这里面了。
https://blog.csdn.net/zr15829039341/article/details/103602750