react+ajax+material-ui 实现简单table

最新推荐文章于 2024-09-08 09:14:47 发布

MenBad

最新推荐文章于 2024-09-08 09:14:47 发布

阅读量302

点赞数

分类专栏：前段文章标签： react.js ui javascript

本文链接：https://blog.csdn.net/MenBad/article/details/124963813

版权

前段专栏收录该内容

7 篇文章 0 订阅

订阅专栏

import React from 'react';
import $ from 'jquery';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
class UserGist extends React.Component {
    constructor(props) {
        super(props);
        this.state = {rows:[]};
        console.log(this.state);
    }
    componentDidMount() {
      this.serverRequest = $.get(this.props.source, function (result) {
        const  lastGist = result;
        this.setState({
          rows:lastGist
        });
      }.bind(this));
    }
   
    componentWillUnmount() {
      this.serverRequest.abort();
    }
   
    render() {
      return (
        <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="left">用户名</TableCell>
            <TableCell align="left">网址</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {this.state.rows.map((row) => (
            <TableRow key={row.node_id}  sx={{ '&:last-child td, &:last-child th': { border: 1 } }}>
              <TableCell align="left">{row.url}</TableCell>
              <TableCell align="left">{row.comments_url}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
      );
    }
  }
  export default UserGist;

this.props.source需要配置，我配置在另外一个文件中

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<UserGist source="https://api.github.com/users/octocat/gists" />

</React.StrictMode>

);