Reactjs - react-reponsive-carousel

Question

嗨，我是反应的新手，我想尝试从其他库中提取一些代码，看看它是如何工作的。不幸的是，我有点不敢尝试使用反应敏感的旋转木马。我意识到这是一个非常简单的问题，但我已经坚持了很长一段时间了，并且会感谢任何提示！非常感谢你！

以下是我正在尝试的内容：

  

Index.jsx

import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';
import CarouselComponent from './Carousel.jsx'

class App extends React.Component {
    render() {
        return (
            <div>
                <p>Hello React!</p>
                <AwesomeComponent />
                <CarouselComponent />
            </div>
        );
    }
}

render(<App/>, document.getElementById('container'));

  

Carousel.jsx：

import React from 'react';
import Carousel from 'react-responsive-carousel';

class CarouselComponent extends React.Component {
    render() {
        return (
            <div>
                <Carousel>
                    <div>
                        <img src="assets/1.jpeg" />
                        <p className="legend">Legend 1</p>
                    </div>
                    <div>
                        <img src="assets/2.jpg" />
                        <p className="legend">Legend 2</p>
                    </div>
                    <div>
                        <img src="assets/3.jpg" />
                        <p className="legend">Legend 3</p>
                    </div>
                </Carousel>
            </div>
        );
    }
}
export default CarouselComponent;

我现在在控制台中看到的错误是：

Warning: React.createElement: type is invalid -- expected a string (for 
built-in components) or a class/function (for composite components) but got: 
undefined. You likely forgot to export your component from the file it's 
defined in. Check the render method of `CarouselComponent`.
    in CarouselComponent (created by App)
    in div (created by App)
    in App

Answer 1

尝试使用大括号导入react-responsive-carousel。像：

import { Carousel } from 'react-responsive-carousel';