如何在 reactjs 中使用 bulma carousel？答案

【问题标题】：How to use bulma carousel with reactjs?如何在 reactjs 中使用 bulma carousel？
【发布时间】：2019-06-18 17:52:33
【问题描述】：

我用 NPM 下载了 bulma-carousel。我试过谷歌搜索并查看各种论坛的其他答案，但无济于事。

我的index.html

<!DOCTYPE html>
<head>

    <script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
    <link rel="stylesheet" href="bulma-carousel.min.css">
    <!-- <script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script> -->
    <title>GIS</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

<script>
    $(document).ready(function(){
        var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
    });
</script>
</body>
</html>

我的轮播组件文件

import React from 'react';
import bulmaCarousel from 'bulma-carousel';


class Pictures extends React.Component {
    constructor(props) {
        super(props);
        var carousels = bulmaCarousel.attach('.carousel', {
            slidesToScroll: 1,
            slidesToShow: 3
        });

    }
    render() {
        return (
            <div>
                <div class='carousel carousel-animated carousel-animate-slide'>
                    <div class='carousel-container'>
                        <div class='carousel-item has-background is-active'>
                            <img class="is-background" src="" alt="" width="640" height="310" />
                            <div class="title">Merry Christmas</div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
                            <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
                            <div class="title">Sushi time</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Pictures

然后图片组件通过其他组件导出到我的App组件中。

我的页面看起来就像一堆堆叠在一起的图片。在下载 bulma-carousel 并成功使用 Hero 和 columns 等类之前，我确实安装了 bulma 框架，所以那里没有问题。我没有下载 bulma-extension，因为我不需要所有这些。我不确定在哪里放置/使用 bulma-carousel js，所以我把它们放在任何地方，看看它是否改变了，但它没有

我也是reactjs新手，除了轮播之外还有其他地方不对，请见谅

【问题讨论】：

控制台会抛出什么东西吗？也许尝试另一个版本的 bulma-carousel。尝试 4.0.1 或 3.0.0
@NicoDiz 即使我确实使用了另一个版本，我仍然需要有关如何在我的项目中正确合并 bulma-carousel 的指导，例如哪种语法适用于哪个文件。我仍然对那部分感到困惑。
您可能需要在 componentDidMount() 中使用 bulmaCarousel.attach()。参考github.com/Wikiki/bulma-carousel/issues/30

标签： javascript reactjs carousel bulma

【解决方案1】：

您似乎过早地尝试附加轮播。将您的组件更新为以下内容：

import React from 'react';
import bulmaCarousel from 'bulma-carousel/dist/js/bulma-carousel.min.js';


class Pictures extends React.Component {
    constructor(props) {
        super(props);

    }
    componentDidMount() {
      var carousels = bulmaCarousel.attach('.carousel', {
        slidesToScroll: 1,
        slidesToShow: 1
      });
    }
    render() {
        return (
            <div>
                <div class='carousel carousel-animated carousel-animate-slide'>
                    <div class='carousel-container'>
                        <div class='carousel-item has-background is-active'>
                            <img class="is-background" src="" alt="" width="640" height="310" />
                            <div class="title">Merry Christmas</div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
                            <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
                            <div class="title">Sushi time</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Pictures

【讨论】：