react-responsive carousel混乱

Question

我已经看过文档了，我不知道为什么它能工作，但是它搞砸了。下面是我的代码：

function CarouselItem(props) {
  const { post } = props

  return (
    <React.Fragment>
      <div>
        <img src={`http://localhost:5000/image/${post.foto}`} />
        <p className="legend">{post.judul}</p>
      </div>
    </React.Fragment>
  )
}

function NewsItem(props) {
  const { posts } = props.post

  let content = posts.map(item => <CarouselItem key={item._id} post={item} />)

  return (
    <div>
      <Carousel showThumbs={false}>{content}</Carousel>
    </div>
  )
}

结果是这样的：

​

​

Answer 1

在.js文件的第一行中使用以下代码：

import 'react-responsive-carousel/lib/styles/carousel.min.css';