javascript - 轮播转换没有响应

Question

我对 react 和 Bootstrap 还很陌生。我选择了一些 Bootstrap 轮播源代码，尝试在我的reactjs应用程序中实现它。问题是下一个和上一个按钮没有响应。此外，图像不会自动更改。

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;

如何让点击事件在我的 React 应用程序中发挥作用？

Answer 1

确保 React 组件已渲染。查找如何使用轮播的文档 https://getbootstrap.com/docs/3.3/javascript/#carousel

它给出了手动设置轮播的示例 $('#myCarousel').carousel()

更改您的 React 组件以从 React.Component 扩展

将该手动设置添加到您的 componentDidMount 方法中

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