React导入自定义组件后不显示也无报错问题求助

核心问题原因 #

React JSX 有强制规范：自定义组件必须以大写字母开头，首字母小写的标签会被默认识别为 HTML 原生内置标签，浏览器会将其视为未知原生标签直接忽略，既不会渲染你定义的组件逻辑，也不会抛出错误。

修复步骤 #

• 第一步：修改自定义组件的命名，将cardComponent改为首字母大写的CardComponent，组件定义、导出语句同步修改：

import "bootstrap/dist/css/bootstrap.css";

// 组件名首字母大写
const CardComponent = () => {
  return (
    <div className="card">
      <img className="card-img-top" src="..." alt="Card image cap" />
      <div className="card-body">
        <h5 className="card-title">Card title</h5>
        <p className="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" className="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  );
};

// 导出名同步修改
export default CardComponent;

• 第二步：修改App文件内的导入语句和组件调用语句，同步改为首字母大写：

import "./App.css";
// 导入时首字母大写
import CardComponent from "./component/cardComponent";

const App = () => {
  return (
    <div className="App">
      {/* 调用时首字母大写 */}
      <CardComponent />
    </div>
  );
};

export default App;

补充排查方案 #

如果修改后还是无法显示，可依次排查以下问题：

• 检查组件文件路径是否正确，./component/cardComponent的路径是否和你本地的文件结构匹配
• 检查bootstrap依赖是否正常安装，未安装的话可以执行npm i bootstrap安装后重启项目
• 重启本地开发服务，清除缓存后重新查看

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