Question

我的项目正在使用react.js和next.js，我试图通过使用react-boostrap创建一个Carousel。但是当我尝试这个问题出现我的项目中也包含了next.config.js

这是我的代码：

import React from 'react'
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
import Carousel from 'react-bootstrap/Carousel'
class ControlledCarousel extends React.Component {
  constructor(props, context) {
    super(props, context)

    this.handleSelect = this.handleSelect.bind(this)

    this.state = {
      index: 0,
      direction: null
    }
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction
    })
  }

  render() {
    const { index, direction } = this.state

    return (
      <div>
        <Carousel
          activeIndex={index}
          direction={direction}
          onSelect={this.handleSelect}
        >
          <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="Third 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>
      </div>
    )
  }
}


export default ControlledCarousel

有谁曾经使用过next.js框架和react-bootstrap吗？你能帮我解决这个问题吗感谢大家为这个问题提供帮助！

Answer 1

我相信这是由于您使用的React版本造成的。 Context API已在v16.3.0中引入。您可以尝试更新到最新版本的React吗？

如何在next.js和React.js中使用react-boostrap

1 个答案: