时间戳

首页 > 解决方案 > 我的滑块不工作并且没有显示错误并且所有图像都出现在页面上

reactjs - 我的滑块不工作并且没有显示错误并且所有图像都出现在页面上

问题描述

import React from 'react';
import ReactDom from 'react-dom';

export class Home extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        <div id="carousel-example-1z" className="carousel slide carousel-fade" data-ride="carousel">
                            <ul className="carousel-indicators">
                                <li data-target="#carousel-example-1z" data-slide-to="0" className="active"></li>
                                <li data-target="#carousel-example-1z" data-slide-to="1"></li>
                                <li data-target="#carousel-example-1z" data-slide-to="2"></li>
                            </ul>
                            <div className="carousel-inner" role="listbox">
                                <div className="carousel-item active">
                                    <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide" />
                                </div>
                                <div className="carousel-item">
                                    <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide" />
                                </div>
                                <div className="carousel-item">
                                    <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide" />
                                </div>
                            </div>
                            <a className="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
                                <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span className="sr-only">Previous</span>
                            </a>
                            <a className="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
                                <span className="carousel-control-next-icon" aria-hidden="true"></span>
                                <span className="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>



            </div>
        );
    }
}
export default Home;

标签： reactjs

解决方案

我可以确定的一件事是您将组件导出两次：

这里：

export class Home extends React.Component {

和这里：

export default Home;

只选择一种方式。

推荐阅读