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

编程问答 2022-08-14

问题描述

我通过对以下组件进行反应来创建SPA：browserRouter，Route，Link，AppBar，Toolbar，Tabs，Tab，MaterialTable。

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

codesandBox链接：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;

解决方法

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

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

,

如本github issue thread中所述，降级至版本。 1.68.0将解决问题。

纱线添加材料表@ 1.68.0

或

npm install material-table@1.68.0

material-tablematerial-uireactjsreactjs