轮播转换无响应

Posted 2023-03-06

【中文标题】轮播转换无响应

【英文标题】：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> 不使用或不需要结束斜线，而且从来没有。

【参考方案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();