javascript - 对齐 Material-UI 表中的 TableHeader 和 TableBody 数据

Question

我有这个文件，它应该显示从数据库中提取的问题表。

该表确实显示，但所有问题数据都显示在ISSUE NUMBER 列下，而不是每个数据项都显示在其正确的列名称下。输出如下所示:

如何编辑此表以使所有数据与正确的列名称对齐？

下面是我的代码:

const styles = theme => ({
  root: theme.mixins.gutters({
    padding: theme.spacing.unit,
    margin: theme.spacing.unit * 5
  }),
  title: {
    margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
    color: theme.palette.openTitle
  },
  bigAvatar: {
    width: 60,
    height: 60,
    margin: 10
  }
})

class Issues extends Component {
  state = {
    issues: [],
  }

  componentDidMount = () => {
    const jwt = auth.isAuthenticated()
    list({
      t: jwt.token
    }).then((data) => {
      if (data.error) {
        this.setState({ redirectToSignin: true })
      } else {
        this.setState({ issues: data })
      }
    })
  }

  render() {
    const { classes } = this.props
    const redirectToSignin = this.state.redirectToSignin
    if (redirectToSignin) {
      return <Redirect to='/signin' />
    }
    return (
      <Paper className={classes.root} elevation={4}>
        <Typography type="title" className={classes.title}>
          All Issues
            </Typography>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>ISSUE NUMBER</TableCell>
              <TableCell>ISSUE TITLE</TableCell>
              <TableCell>ISSUE URL</TableCell>
              <TableCell>PUBLIC/PRIVATE</TableCell>
              <TableCell>REPO</TableCell>
            </TableRow>
          </TableHead>
          <List dense>
            {this.state.issues.map((item, i) => {
              return <Link target="_blank" to={item.issue_url} key={i}>
                <ListItem button>
                  <ListItemText primary={<div>
                    <TableBody>
                      <TableRow>
                        <TableCell>{item.issue_number}</TableCell>
                        <TableCell>{item.issue_title}</TableCell>
                        <TableCell>{item.issue_url}</TableCell>
                        <TableCell>{item.issue_url.includes("github.com") ? 'Private'
                          : item.issue_url.includes("github.com") ? 'Public'
                            : "Stackoverflow"}</TableCell>
                        <TableCell>{item.issue_url.includes("sdk-go") ? 'sdk-go'
                          : item.issue_url.includes("sdk-java") ? 'sdk-java'
                            : item.issue_url.includes("sdk-js") ? 'sdk-js'
                              : item.issue_url.includes("sdk-python") ? 'sdk-python'
                                : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core'
                                  : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer'
                                    : item.issue_url.includes("issues/issues") ? 'issues/issues'
                                      : "Stackoverflow"}
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  </div>} />
                  <ListItemSecondaryAction>
                    <IconButton>
                      <ArrowForward />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
              </Link>
            })
            }
          </List>
        </Table>
      </Paper>
    )
  }
}

Issues.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(Issues)

如果我将 TableHead 移到 list 标记内，布局看起来会稍微好一些，但 TableBody 数据与 不对齐表头数据:

<Table className={classes.table}>
        <List dense>
          <TableHead>
            <TableRow>
              <TableCell width="100" align="left">ISSUE NUMBER</TableCell>
              <TableCell align="left">ISSUE TITLE</TableCell>
              <TableCell align="left">ISSUE URL</TableCell>
              <TableCell align="left">PUBLIC/PRIVATE</TableCell>
              <TableCell align="left">REPO</TableCell>
            </TableRow>
          </TableHead>
          {this.state.issues.map((item, i) => {
            return <Link target="_blank" to={item.issue_url} key={i}>
                    <ListItem button>
                      <ListItemText primary={
                                                <TableBody>
                                                  <TableRow>
                                                    <TableCell width="100" align="left">{item.issue_number}</TableCell>
                                                    <TableCell align="left">{item.issue_url}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("github.com") ? 'Private' 
                                                                            : item.issue_url.includes("github.com") ? 'Public' 
                                                                            : "Stackoverflow"}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("sdk-go") ? 'sdk-go' 
                                                                            : item.issue_url.includes("sdk-java") ? 'sdk-java' 
                                                                            : item.issue_url.includes("sdk-js") ? 'sdk-js' 
                                                                            : item.issue_url.includes("sdk-python") ? 'sdk-python' 
                                                                            : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core' 
                                                                            : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer' 
                                                                            : item.issue_url.includes("issues/issues") ? 'issues/issues' 
                                                                            : "Stackoverflow"}
                                                    </TableCell>
                                                  </TableRow>
                                                </TableBody>
                                             }/>
                      <ListItemSecondaryAction>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton>
                      </ListItemSecondaryAction>
                    </ListItem>
                 </Link>
               })
             }
        </List>
        </Table>

Answer 1

默认情况下，material-ui 使用 'table'、'tr'、'th' 等 html 元素。这些元素之间不得有非表元素。在您的情况下，列表组件会创建破坏布局的元素。我建议删除列表组件并在表格单元格中渲染箭头。

以下是有效代码的示例:

<Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell align="left">ISSUE NUMBER</TableCell>
              <TableCell align="left">ISSUE TITLE</TableCell>
              <TableCell align="left">ISSUE URL</TableCell>
              <TableCell align="left">PUBLIC/PRIVATE</TableCell>
              <TableCell align="left">REPO</TableCell>
            </TableRow>
          </TableHead>
          {this.state.issues.map((item, i) => {
                 return                               <TableBody>
                                                  <TableRow key={i}>
                                                    <TableCell align="left">{item.issue_number}</TableCell>
                                                    <TableCell align="left">{item.issue_title}</TableCell>
                                                    <TableCell align="left">{item.issue_url}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("github.com") ? 'Private' 
                                                                            : item.issue_url.includes("github.com") ? 'Public' 
                                                                            : "Stackoverflow"}</TableCell>
                                                    <TableCell align="left">{item.issue_url.includes("sdk-go") ? 'sdk-go' 
                                                                            : item.issue_url.includes("sdk-java") ? 'sdk-java' 
                                                                            : item.issue_url.includes("sdk-js") ? 'sdk-js' 
                                                                            : item.issue_url.includes("sdk-python") ? 'sdk-python' 
                                                                            : item.issue_url.includes("sdk-python-core") ? 'sdk-python-core' 
                                                                            : item.issue_url.includes("sdk-python-s3transfer") ? 'sdk-python-s3transfer' 
                                                                            : item.issue_url.includes("issues/issues") ? 'issues/issues' 
                                                                            : "Stackoverflow"}
                                                    </TableCell>
                                                    <TableCell>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton></TableCell>
                                                  </TableRow>
                                                </TableBody>
               })
             }
        </Table>