Question

我很反应和引导。我选择了一些bootstrap carousel源代码，试图在我的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;

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

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();
}

轮播过渡没有回应

1 个答案: