时间戳

首页 > 解决方案 > 材质 UI 可滚动选项卡未在 Internet Explorer 中呈现

javascript - 材质 UI 可滚动选项卡未在 Internet Explorer 中呈现

问题描述

我正在为我们的 React Web UI 中的选项卡控件实现 Material UI。这在 Chrome 中运行良好，但第二次我们尝试在 IE 中测试，页面拒绝加载，控制台抛出以下错误：

未处理的承诺拒绝不变违规：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

下面是围绕 Material-UI 添加的代码。如前所述，这在 Chrome 中运行良好，但似乎在 IE 中失败了。中断 IE 的特定行是该scrollable={true}行 - 如果将其删除或更改为 false，则页面将呈现（尽管没有我们需要的滚动）。不确定在 IE 中关于 Material-UI 是否有任何特别需要注意的问题？

    var menuString = isList ? null : <AppBar position="static" color="default"><Tabs
        scrollable={true}
        value={activeItem}
        onChange={this.handleTabSelection}
        scrollButtons="auto"
        classes={{ indicator: "tabsIndicator" }}>
        {
            jsxData.map((item, index) => {
                return (
                    <Tab key={index} value={item.name} label={item.name} 
                    classes={{ selected: "tabSelected" }}/>
                );
            })
        }
    </Tabs></AppBar>;

    return <Segment basic className={"report-group-render " + (isList ? "list" : "tabs")}>
        {menuString}
    </Segment>;

标签： javascriptreactjsmaterial-ui

解决方案

答案是jsxData.map(...)在最终用它的报告数组呈现之前返回一个空数组进行几次迭代。Chrome 会忽略/吞下这些初始的空数组问题而不会引起关注，因为 IE 决定自行破坏。

解决方案是将第一行更改为以下内容：

var menuString = isList || jsxData.length === 0 ? null : <AppBar position="static" color="default"><Tabs

推荐阅读