如何让 React.js 和 Bootstrap 4 模态轮播始终在打开时显示第一张图像

Question

我将 React.js 与 Bootstrap 4 模态/轮播一起使用，我希望在打开/重新打开模态时始终显示第一张图像。现在，第一次打开模态时会显示第一张图像，但是当用户滚动到另一个图像然后关闭并重新打开模态时，它会显示用户查看的最后一张图像，而不总是第一张。我尝试在我的 componentDidMount 中使用 jquery 来强制轮播索引，但它不起作用。

这是我预期行为的示例场景...
1. 打开模态（显示第一张图片）
2. 轮播到第二个项目
3. 关闭模态
4. 打开模态（显示第一张图片）

这是Demo

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.scss';
import $ from 'jquery';

class App extends Component {
    constructor() {
        super();
    }

  componentDidMount() {
    // My attempts to always have carousel begin at index 0 on show event
    // $('.largeModal').on('show.bs.modal', function() {
        // console.log('show.bs.modal event');
        // $('.carousel').carousel(0);
    // });

    // $('.largeModal').on('show.bs.modal', function() {
        // console.log('show.bs.modal event');
        // $('#myCarousel').carousel(0);
    // });
  }

    render() {
        return (
            <div className='container'>
                <h3 className='text-center mb-4'>React with Bootstrap 4 Modal & Carousel</h3>

                <div class='row mb-4'>
                    <div class='col text-center'>
                        <button
                            type='button'
                            className='btn btn-primary '
                            data-toggle='modal'
                            data-target='#largeModal'
                        >
                            Open Modal
                        </button>
                    </div>
                </div>

                {/* Modal*/}
                <div
                    className='modal fade'
                    id='largeModal'
                    tabIndex='-1'
                    role='dialog'
                    aria-labelledby='basicModal'
                    aria-hidden='true'
                >
                    <div className='modal-dialog modal-lg'>
                        <div className='modal-content'>
                            <div className='modal-body'>
                                {/* Carousel */}
                                <div
                                    id='myCarousel'
                                    className='carousel slide'
                                    data-ride='carousel'
                                >
                                    <ol className='carousel-indicators'>
                                        <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>
                                    </ol>
                                    <div className='carousel-inner'>
                                        <div className='carousel-item active'>
                                            <img
                                                className='img-size'
                                                src='https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1391&q=80'
                                                alt='First slide'
                                            />
                                        </div>
                                        <div className='carousel-item'>
                                            <img
                                                className='img-size'
                                                src='https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
                                                alt='Second slide'
                                            />
                                        </div>
                                        <div className='carousel-item'>
                                            <img
                                                className='img-size'
                                                src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
                                                alt='Third slide'
                                            />
                                        </div>
                                    </div>
                                    <a
                                        className='carousel-control-prev'
                                        href='#myCarousel'
                                        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='#myCarousel'
                                        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 className='modal-footer'>
                                <button
                                    type='button'
                                    className='btn btn-default'
                                    data-dismiss='modal'
                                >
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

style.scss

.img-size{
    height: 450px;
    width: 700px;
    background-size: cover;
    overflow: hidden;
}
.modal-content {
   width: 700px;
  border:none;
}
.modal-body {
   padding: 0;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    width: 30px;
    height: 48px;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    width: 30px;
    height: 48px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React Modal with Carousel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

package.json

{
  "name": "react",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "1.9.1 - 3",
    "node-sass": "^4.13.1",
    "popper.js": "^1.16.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

Answer 1

tl，博士；

在你的 App 中导入的 jQuery 和 window 对象中的不一样。因此，Bootstrap 不会使用您正在使用的 .carousel() 方法对其进行扩展。您可以使用

访问 window 对象中的那个

const $ = window.$

在componentDidMount 函数内。看到它here.
或者你可以在 jQuery 之后导入 popper.js 和 Bootstrap 的 js，并从 index.html 中删除 <script> 标签。

---

完整（初始）答案：

首先，你现在有一些问题：

• 您的尝试使用$('.largeModal') 完成，但我在您的代码中没有看到任何className="largeModal"。您可能想使用#largeModal。
• 你的标记中有几个 class 的情况，React 似乎不喜欢它们
• 您正在使用 Bootstrap v4.0.0。无论主要版本是什么，您都应始终使用该主要版本的最新稳定版本（当前 4 为 v4.4.1，当前 3 为 v3.4.1）。
• 您正在加载 jQuery 两次。一次在index.html（来自cdn）和一次在你的组件中（来自包）。虽然可以多次加载 jQuery（以允许不同的模块使用不同版本的 jQuery），但它有一种特殊的技术并且您没有使用它（在兼容模式下运行 jQuery）。我不会详细介绍（至少对于当前问题）您不需要它。

现在，您有两个选择：

a) 像您一样加载 jQuery、popper.js 和 bootstrap，但是您还必须将脚本放在 index.html 中，在它们之后（在 <script> 标记中，而不是在componentDidMount)，并使用类似：

$(document).on('show.bs.modal', '#largeModal', function() {
  $('#myCarousel').carousel(0);
})

或...
b) 在组件内正确加载 jQuery、popper.js 和 bootstrap 的 js（使用 import，从它们各自的 npm 包中）。

主要的问题是，如果你在你的组件中只导入 jQuery（除了加载两次，这本身就是一个问题），它不会有 bootstrap.js 扩展的方法。而且您似乎非常需要其中之一$().carousel()。

现在，我知道 "b)" 不是一个理想的实用解决方案，因为您不必分别在每个组件中导入 jQuery、popper 和 bootstrap，解决方案是通过在componentDidMount 中使用const $ = window.$ 将外部引用分配给您的组件，如tl,dr; 中所述。

您可以看到它在工作（通过导入）here。
它也可以在 React 外部工作（选项 "a)"）。只要确保您只使用一种方法加载jQuery、popper.js 和bootstraps js，而不是同时使用这两种方法。我个人不推荐选项 "a)"（阅读说明）。

干杯！

---

注意：React 和 jQuery 是两种不同的 Web 范例，一起使用它们会让你的生活变得更加艰难（作为程序员）。通过选择一个并坚持使用它，您可能会更快乐（并且更熟练）（大多数开发人员会建议您放弃 jQuery 并使用 React Bootstrap，但选择完全由您自己决定）。

Answer 2

将图像属性存储在对象数组中，例如。 并将它们映射到渲染。

let arr = [
{
className:'img-size',
src:'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
alt:'Third slide'
 },
and more like this.
]

//Then map the images in carousel ann it would always show first image first, because it would always render images at runtime.

arr.map(img => {
return(
           <img
               className={img.className}
               src={img.src}
               alt={img.alt}
          />
);
})