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

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嗎？