Material UI React 表挂在切换选项卡上答案

【问题标题】：Material UI React table hangs on switching tabsMaterial UI React 表挂在切换选项卡上
【发布时间】：2020-12-15 12:46:53
【问题描述】：

我使用 react 与以下组件创建 SPA：BrowserRouter、Route、Link、AppBar、Toolbar、Tabs、Tab、MaterialTable。

一切正常，除了当我在选项卡之间快速切换（单击 PAGE1、PAGE2 链接）时，浏览器会挂起。这发生在 Chrome 和 Firefox 中。我没有使用任何状态或钩子。

密码箱链接：https://codesandbox.io/s/winter-pond-1zsn3?file=/public/index.html

App.js：

import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Header from "./Header";

export default function App() {
  return (
    <BrowserRouter>
      <Header />
      <Switch>
        <Route exact path="/Page1" component={Page1}></Route>
        <Route exact path="/Page2" component={Page2}></Route>
      </Switch>
    </BrowserRouter>
  );
}

Header.jsx

import React from "react";
import { Link } from "react-router-dom";
import { AppBar, Toolbar, Tabs, Tab } from "@material-ui/core";

const Header = () => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Tabs>
          <Tab label="Page1" to="/Page1" component={Link} />
          <Tab label="Page2" to="/Page2" component={Link} />
        </Tabs>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

Page1.jsx

import React from "react";

const Page1 = () => {
  return <div>Page1</div>;
};

export default Page1;

Page2.jsx

import React from "react";
import MaterialTable from "material-table";

const taskColumns = [
  { title: "Task Name", field: "TaskName" },
  { title: "Task Description", field: "TaskDesc" }
];
const Page2 = () => {
  return <MaterialTable title="Task List" columns={taskColumns} data={[]} />;
};

export default Page2;

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

拉取MaterialTable源码并调试后。我发现 reducePercentsInCalc 方法是从 renderHeader 方法中递归调用的。我认为代码正在尝试根据单元格内容计算标题的宽度。

为了避免这种调用，我使用 width 属性设置了每列的宽度，从而解决了这个问题。

【讨论】：

嗨，即使我也面临同样的问题。您能否提供一个沙盒链接或示例代码，说明您如何设置列的宽度？
在大多数情况下，解决方法不是一个合适的答案。我在gitter.im/material-table/Lobby 发帖，试图引起作者的注意。
确认解决方法对我有用。 @kz2014 示例代码只是<MaterialTable columns={[{title: 'column title', field: 'column field', width: 100}, {...otherColumns...}]} .../>。其中 100 实际上可以是任何值。至少对我来说，这些列会自动适应
我刚刚发现如果您使用固定列功能，将应用特定的宽度。在这种情况下，表格获得style="table-layout: fixed" 并强制使用列宽

【解决方案2】：

正如github issue thread 中所述，降级到版本。 1.68.0 会解决这个问题。

纱线添加material-table@1.68.0

或者

npm install material-table@1.68.0

【讨论】：