React-bootstrap (1.0.0-beta16) 轮播在 Internet Explorer (IE) 中不工作

Question

我的 React 应用程序正在使用 react-bootstrap 的轮播。轮播在 Chrome、Firefox、Safari、Edge 上运行良好，但在 Internet Explorer 上无法运行。

问题：轮播会第一次切换然后卡住。不再自动切换，不能点击指标换页

我在网上和此处进行了搜索，但找不到适合我的具体案例的 post/solution。

我的 package.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"
  },

我指定使用 polyfill 作为我 index.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>
    );

尝试过的解决方案

理想情况下，我想让轮播在 Internet 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

解决方案是在浏览器为 IE 时始终确保 "activeIndex" 为 0。这会阻止 Carousel 在索引之间切换。当活动项目改变时触发回调（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>
    );

React-bootstrap (1.0.0-beta16) 轮播在 Internet Explorer (IE) 中不工作

React-bootstrap (1.0.0-beta16) Carousel not working in Internet Explorer (IE)

internet-explorer

carousel

reactjs

react-bootstrap