Как использовать response-boostrap с next.js и React.js

Question

В моем проекте используются response.js и next.js, я пытаюсь создать карусель с помощью response-boostrap.Но когда я пытаюсь решить эту проблему, я также включаю 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 и response-bootstrap?Можете ли вы помочь мне, как решить эту проблему? Спасибо всем за помощь в этой проблеме!

Answer 1

Я полагаю, это связано с версией React, которую вы используете. Context API был представлен в v16.3.0. Не могли бы вы попробовать обновить до последней версии React?