React-bootstrap（1.0.0-beta16）传送带在Internet Explorer（IE）中不起作用

Question

我的React应用程序正在使用react-bootstrap的轮播。该轮播在Chrome，Firefox，Safari，Edge上正常运行，但在Internet Explorer上不起作用。

问题：轮播会在第一次切换后冻结。它不再自动切换，并且您不能单击指示器来更改页面。

我已经在网上和此处进行过搜索，找不到适合我特定情况的帖子/解决方案。

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

我指定使用polyfills作为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。这将阻止轮播在索引之间切换。更改活动项时（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>
    );