React.js 项目测试组件无法渲染、图片不显示问题求助

可能的问题原因及对应解决方案 #

1. 组件导出导入规则不匹配 #

• 检查测试组件文件末尾是否用export default导出，App.js中是否用import 组件名 from '对应路径'的默认导入规则引入；如果是命名导出，需要用import { 组件名 } from '对应路径'引入
• 确认组件文件路径大小写完全匹配，React对文件路径大小写敏感，例如组件文件名为TestComp.js时，导入时写testcomp.js会在非Windows环境下找不到模块，导致组件无法渲染

2. 组件内部存在语法/运行错误 #

• 测试组件内部如果存在未闭合标签、未定义变量直接渲染、属性类型不匹配等问题，React会抛出错误阻断组件渲染
• 按F12打开浏览器控制台的Console面板，红色报错信息会直接定位具体错误位置

3. 图片引用路径配置错误 #

图片无法加载基本都是路径配置问题，对应两种存放位置的正确写法：

• 图片存放在项目public目录：img标签直接写<img src="/图片在public下的相对路径/xxx.png" />，不要加public前缀
• 图片存放在项目src目录：需要先导入再使用，示例：

import testImg from './assets/xxx.png'
// 组件内使用
<img src={testImg} alt="测试图" />

直接写相对路径字符串作为src属性值，React脚手架不会处理src目录下的静态资源引用，会加载失败

4. 渲染条件判断为假 #

检查App.js中渲染测试组件的位置是否加了条件判断，例如{isShow && <TestComp />}，如果isShow的值为false，组件不会渲染也不会抛出任何报错，属于正常的逻辑控制结果

内容的提问来源于stack exchange，提问作者Thevindu Senanayake