为什么使用React Bootstrap Card组件后浏览器页面空白无显示？

核心错误点 #

• 自定义React组件命名不符合规范：小写开头的cardC会被React识别为原生HTML标签，不会渲染自定义组件逻辑，是组件尺寸为0×0的核心原因
• 图片路径传值错误：people数组中imageSource被额外嵌套了一层对象，导致Card.Img的src属性接收到非法值，图片加载失败会进一步导致组件高度坍塌
• 对象键名重复：people数组中重复定义了两次subtitle，后面的值会覆盖前面的，仅保留最后一个
• 多余的JSX大括号：Card组件里Card.Img、第二个Card.Subtitle外层包裹了不必要的大括号，属于语法冗余

修正后代码 #

1. 自定义Card组件（/components/card.js） #

import React from "react";
import Table from "react-bootstrap/Table";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import InputGroup from "react-bootstrap/InputGroup";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";

// 组件名改为大写开头，符合React规范
const CardC = (props) => {
  return (
    <Card style={{ width: "18rem" }}>
      {/* 去掉多余的大括号 */}
      <Card.Img variant="top" src={props.item.imageSource} />
      <Card.Body>
        <Card.Title>{props.item.title}</Card.Title>
        <Card.Subtitle>{props.item.time}</Card.Subtitle>
        <Card.Subtitle>{props.item.memberCount}</Card.Subtitle>
        <Card.Text>{props.item.description}</Card.Text>
        <Button variant="outline-primary">Join</Button>
      </Card.Body>
    </Card>
  );
};
export default CardC;

2. Rooms页面代码 #

import React from "react";
import Card from "react-bootstrap";
// 导入时使用大写开头的组件名
import CardC from "../components/card";
import coffee from "./images/coffee-shop.jpg";
import "bootstrap/dist/css/bootstrap.min.css";

const people = [
  {
    // 去掉多余的对象嵌套，直接传入导入的图片变量
    imageSource: coffee,
    title: "How to Make First Impressions",
    // 拆分重复的subtitle键，改为不同的键名避免值覆盖
    time: "2:30 - 4",
    memberCount: "5 people",
    description: "How to make a good iahfdfhalgalhfkghlahdklghklghaklgha",
  },
];

const Rooms = (props) => {
  return (
    <div>
      {/* 调用时使用大写开头的组件名 */}
      <CardC item={people[0]} />
    </div>
  );
};

export default Rooms;

修正后重新运行npm start即可正常渲染Card组件，尺寸和内容都会正常展示。

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