회전식 전환이 응답하지 않습니다.

Question

저는 반응과 부트 스트랩에 꽤 새로운 것 같습니다. 일부 부트 스트랩 캐 러셀 소스 코드를 선택하여 내 reactjs 앱에서 구현하려고했습니다. 문제는 다음 및 이전 버튼이 응답하지 않는다는 것입니다. 또한, th 이미지는 자동으로 변경되지 않습니다.

import React from 'react'; 
import img1 from '../images/img1.jpg'; 
import img2 from '../images/img2.jpg'; 
import img3 from '../images/img3.jpg'; 
import img4 from '../images/img4.jpg'; 
import 'bootstrap/dist/css/bootstrap.css'; 

const ImageShow = ({imagesData}) => { 

const { caption1,caption2, caption3, caption4 } = imagesData; 

console.log(img1); 
    return(
    <div id="myCarousel" className="carousel slide" data-ride="carousel"> 
     {/* indicators */} 
     <ol className="carousel-indicators" role="listbox"> 
      <li data-target='#myCarousel' data-slide-to="0" className="active"></li> 
      <li data-target='#myCarousel' data-slide-to="1" ></li> 
      <li data-target='#myCarousel' data-slide-to="2" ></li> 
      <li data-target='#myCarousel' data-slide-to="3" ></li> 
     </ol> 

     {/* wrapper for slides */} 
     <div className="carousel-inner"> 
      <div className="imageWidth item active"> 
       <img src={img1} alt={caption1} /> 
      </div> 

      <div className="imageWidth item"> 
       <img src={img2} alt={caption2} /> 
      </div> 

      <div className="imageWidth item"> 
       <img src={img3} alt={caption3} /> 
      </div> 

      <div className="imageWidth item"> 
       <img src={img4} alt={caption4} /> 
      </div> 
     </div> 

     {/* left and right controls */} 
     <a className="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span className="glyphicon glyphicon-chevron-left"></span> 
      <span className="sr-only">Previous</span> 
     </a> 

     <a className="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span className="glyphicon glyphicon-chevron-right"></span> 
      <span className="sr-only">Next</span> 
     </a> 
    </div>); 
} 

export default ImageShow; 

내 반응 앱에서 클릭 이벤트를 작동 시키려면 어떻게해야합니까?

Answer 1

React 구성 요소가 렌더링되었는지 확인하십시오. 회전 목마를 사용하는 방법에 대한 문서를 조회하는 것은 https://getbootstrap.com/docs/3.3/javascript/#carousel

이 $('#myCarousel').carousel()

이 변경 당신이 당신의 componentDidMount 방법으로 그 수동 설정을 추가 React.Component

에서 확장하는 구성 요소에 반응 수동 회전 목마를 설정하는 예를 제공

import ReactDOM from 'react-dom'; 
componentDidMount(){ 
window.$(ReactDOM.findDOMNode(this)).carousel(); 
}