React- bootstrap (1.0.0-beta16) Карусель не работает в Inte rnet Explorer (IE)

Question

Приложение My React использует карусель реакции bootstrap. Карусель работает нормально на Chrome, Firefox, Safari, Edge, но не работает на Inte rnet Explorer.

Проблема: карусель переключается в первый раз, а затем останавливается. Он больше не переключается автоматически, и вы не можете нажимать на индикаторы, чтобы изменить страницу.

Я искал в Интернете и здесь, и не могу найти сообщение / решение для моего конкретного c случая.

Мой пакет. json показывает, какую версию React- Bootstrap я использую

"dependencies": {
    "react": "~16.11.0",
    "react-app-polyfill": "^1.0.5",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "~16.11.0",
    "react-router-dom": "~5.1.2",
    "react-scripts": "~3.2.0",
    "react-tabs": "^3.1.0"
  },

Я указываю использовать полифиллы в качестве первого импорта в моем индексе. js

// these 2 MUST be the first 2 imports
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

Упрощенная версия моего метода рендеринга:

    return (
        <div >
            <Carousel interval="2000" >
                {this.state.carouselItemsArr.map(
                    (item, i) =>
                        <Carousel.Item key={i}>
                            <img src={item.image} alt="first" />
                            <Carousel.Caption>
                                <div className="...">
                                    {item.name}
                                </div>
                            </Carousel.Caption>
                        </Carousel.Item>
                )}
            </Carousel>                
        </div>
    );

Решения, испробованные

В идеале я хотел бы, чтобы карусель работала в Inte rnet Explorer. Если я не могу заставить его работать, то приемлемым обходным путем является показ первого элемента в карусели, а не переключение на другие и скрытие индикаторов.

Я могу скрыть индикаторы, используя JavaScript, но это не останавливает переключение карусели перед замораживанием.

var showIndicators = (this._isIE) ? false : true;

 return (
     <div>
         <Carousel interval="2000" indicators={showIndicators}>
   ....

Я пытался скрыть индикаторы, используя css, но как только я добавляю медиазапрос (даже если он пустой), весь сайт больше не оказывает в IE. Более того, как и обходной путь JavaScript выше, он не останавливает переключение карусели один раз.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    .carousel-indicators {
        display:none;
    }
} 

Answer 1

Решение состояло в том, чтобы всегда гарантировать, что "activeIndex" равен 0, когда браузер равен IE. Это останавливает карусель от переключения между индексами. Когда обратный вызов срабатывает при изменении активного элемента (onSelect), если браузер имеет значение IE, не изменяйте активный индекс. Поэтому для IE активный индекс всегда равен 0 (первый элемент), и поэтому карусель никогда не скользит и просто выглядит как изображение, а не как карусель.

export default class CarouselComponent extends React.Component {

     // determine if the browser is IE
     _isIE = /*@cc_on!@*/false || !!document.documentMode; 

    state = {
        activeIndex : 0
        carouselItemsArr: null,
    }

    componentDidMount() {
         // gets carousel items from server
         // var carouselItemsArr = .....
         self.setState({
             carouselItemsArr: items,
         });
    }

    /**
     * Callback fired when the active item changes.
     * If the browser is IE, do not change the activeIndex, 
     * therefore the carousel will not switch items
     */
    handleActiveItemChange = (selectedIndex, e) => {
         if (!this._isIE) {
            this.setState({
                activeIndex : selectedIndex,
            });
         }
    };

    return (
        <div>
            <Carousel interval="2000" 
                      activeIndex={this.state.activeIndex} 
                      onSelect={this.handleActiveItemChange}>

                {this.state.carouselItemsArr.map(
                     .....
                )}

            </Carousel>                
        </div>
    );