React-bootstrap Carousel组件无法运行，编译报错求助

咱们一步步来解决你遇到的问题：

1. 导入方式错误（触发"不包含默认导出"报错） #

React-Bootstrap的所有组件都是命名导出，并非默认导出，你之前的默认导入写法不符合它的导出规则。需要改成命名导入：

// 错误写法
import Carousel from 'react-bootstrap'; 

// 正确写法
import { Carousel } from 'react-bootstrap'; 

2. 组件类拼写错误 #

React组件类必须继承自React.Component（注意Component的首字母是大写的），你写的React.component是小写的c，这会导致语法报错：

// 错误写法
class HomeSlider extends React.component { 

// 正确写法
class HomeSlider extends React.Component { 

3. JSX结构错误 #

React组件的render方法返回的JSX只能有一个根元素，而且所有Carousel.Item必须被Carousel组件包裹。你原来的代码把Carousel.Item放在了Carousel标签外面，完全不符合组件嵌套规则。

另外，第一个Carousel.Item缺少图片元素，虽然不会触发编译错误，但会导致轮播显示异常，建议补充完整。

修正后的完整代码 #

import React from 'react'; 
import { Carousel } from 'react-bootstrap'; 

class HomeSlider extends React.Component { 
  render() { 
    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=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 HomeSlider;

额外注意事项 #

• 确保你已经正确安装了依赖：

  npm install react-bootstrap bootstrap
  

• 记得在项目入口文件（比如index.js）中引入Bootstrap的CSS样式：

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

这样修改后，你的Carousel组件就能正常编译和运行了。

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