轮播转换无响应答案

【问题标题】：Carousel Transitions not Responding轮播转换无响应
【发布时间】：2018-05-11 19:40:22
【问题描述】：

我对反应和引导很陌生。我选择了一些引导轮播源代码，尝试在我的 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 应用中起作用？

【问题讨论】：

注意：<img> 不使用或不需要结束斜线，而且从来没有。

标签： javascript css twitter-bootstrap reactjs twitter-bootstrap-3

【解决方案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();
}

【讨论】：