React Bootstrap Carousel组件无报错但页面不显示问题

问题根因 #

代码存在3个核心问题：

• 自定义CarouselAuto箭头函数没有返回JSX内容，组件实际返回undefined，无DOM输出
• 未引入Bootstrap核心CSS文件，react-bootstrap组件无生效样式
• 示例代码使用holder.js格式的占位图，但未安装对应依赖，图片无法加载

修复步骤 #

1. 修复组件返回值 #

箭头函数写多行JSX时，要么用小括号包裹JSX实现隐式返回，要么显式添加return关键字返回内容。修复后的CarouselAuto.jsx代码如下：

import React from 'react'
import Carousel from 'react-bootstrap/Carousel'
// 如需使用holder占位图则引入，使用真实图片可删除该行
import 'holderjs'

const CarouselAuto = () => {
  // 原代码漏写return，导致组件无返回内容
  return (
    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=282c34"
          alt="Second slide"
        />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  )
}

export default CarouselAuto

2. 引入Bootstrap核心CSS #

在项目入口文件（通常为src/index.js）或App.js顶部添加引入语句：

import 'bootstrap/dist/css/bootstrap.min.css'

注意：react-bootstrap 只提供组件逻辑，不内置Bootstrap样式文件，必须手动引入否则组件样式完全不生效。

3. 处理占位图依赖 #

如果要使用示例中的holder占位图，先安装对应依赖：

npm install holderjs

如果不需要占位图，直接把所有img标签的src属性替换为自己的真实图片地址即可，无需安装holderjs。

修复完成后刷新页面，轮播组件即可正常渲染、切换。

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