Material-ui 组件未在基于 React class 的组件中呈现？

Question

Material-ui 组件未在基于 React class 的组件中呈现？ 我正在尝试将基于函数的 material-ui 组件转换为基于 class 的组件，但是基于 class 的组件未呈现...在主 div 中inspect main div 没有显示那个组件？ 知道如何将 material-ui 与基于 class 的组件一起使用吗？

enter code here   


 import * as React from 'react';
    import Box from '@mui/material/Box';
    import Tabs from '@mui/material/Tabs';
    import Tab from '@mui/material/Tab';

    function LinkTab(props) {
        return (
          <Tab
            component="a"
            onClick={(event) => {
              event.preventDefault();
            }}
            {...props}
          />
        );
      }

    class Header extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 0,
        };
      }

      handleChange = (event, newValue) => {
        this.setState(
          (prevState) => (
            {
              value: newValue,
            },
            () => {
              console.log("value", this.state.newValue);
            }
          )
        );
      };

      render() {
        return (
            <Box sx={{ width: '100%' }}>
              <Tabs value={this.state.value} onChange={this.handleChange()} aria-label="nav tabs example">
                <LinkTab label="Page One" href="/drafts" />
                <LinkTab label="Page Two" href="/trash" />
                <LinkTab label="Page Three" href="/spam" />
              </Tabs>
            </Box>
          );
      }
    }

    export default Header;







    import * as React from 'react';
    import Box from '@mui/material/Box';
    import Tabs from '@mui/material/Tabs';
    import Tab from '@mui/material/Tab';

    function LinkTab(props) {
      return (
        <Tab
          component="a"
          onClick={(event) => {
            event.preventDefault();
          }}
          {...props}
        />
      );
    }

    export default function header() {
      const [value, setValue] = React.useState(0);

      const handleChange = (event, newValue) => {
        setValue(newValue);
      };

      return (
        <Box sx={{ width: '100%' }}>
          <Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
            <LinkTab label="Page One" href="/drafts" />
            <LinkTab label="Page Two" href="/trash" />
            <LinkTab label="Page Three" href="/spam" />
          </Tabs>
        </Box>
      );
    }

Answer 1

1. 替换

<Tabs value={this.state.value} onChange={this.handleChange()}

来自

<Tabs value={this.state.value} onChange={this.handleChange}

2. 替换

handleChange = (event, newValue) => {
  this.setState(
    (prevState) => (
      {
        value: newValue,
      },
      () => {
        console.log("value", this.state.newValue);
      }
    )
  );
};

来自

handleChange = (event, newValue) => {
  this.setState(
    {value: newValue},
    () => {
      console.log("value", this.state.newValue);
    }
  );
};