React-bootstrap (1.0.0-beta16) Carousel 在 Internet Explorer (IE) 中不起作用答案

【问题标题】：React-bootstrap (1.0.0-beta16) Carousel not working in Internet Explorer (IE)React-bootstrap (1.0.0-beta16) Carousel 在 Internet Explorer (IE) 中不起作用
【发布时间】：2020-03-17 17:39:12
【问题描述】：

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

我指定在我的 index.js 中使用 polyfills 作为第一个导入

// 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;
    }
}

【问题讨论】：

在IE浏览器的控制台中是否显示任何错误信息？我可以看到您的 jS 代码中包含箭头函数 =>，IE 浏览器不支持该函数。您可以尝试使用 Bebel.js 将您的 ES6 代码转换为 ES5 代码。我们无法使用上述代码产生问题，因为它不是完整的代码。如果可能，您可以尝试创建 JSFiddle 示例，我们可以尝试运行和检查。它可以帮助缩小问题范围。
我正在使用 polyfill，所以箭头函数应该可以使用
另一种解决方法是使用代码识别IE浏览器并将轮播替换为图像标签或根据浏览器用户打开的情况动态加载轮播。如果您的问题仍然存在，我建议您使用 JSFiddle 发布示例。

标签： reactjs internet-explorer carousel react-bootstrap

【解决方案1】：

解决方案是在浏览器为 IE 时始终确保“activeIndex”为 0。这会阻止轮播在索引之间切换。当活动项更改时触发回调（onSelect），如果浏览器是 IE，则不要更改活动索引。因此，对于 IE，活动索引始终为 0（第一项），因此 Carousel 永远不会滑动，只是看起来像图像而不是 carousel。

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>
    );

【讨论】：