javascript - React Material UI 中的网格布局出现问题

Question

我正在尝试使用 Material UI Grid 组件实现特定的布局，但我一生都无法做到正确。

我有一个Dialog，我希望布局最终像这样:

蓝色框包含有关项目的一些信息，绿色框将包含某种媒体，黄色框将包含描述性文本。

但是目前，使用这段代码，它最终会像这样:

<Grid xl={12}>
    <Grid spacing={0} xs={2}>
        <Grid container direction="column">
            <Grid item xs={1}>
                { this.getGridItems("Platforms", data["platforms"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Engines", data["engines"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Frameworks", data["frameworks"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Languages", data["languages"].split(',')) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Roles", data["roles"].split(',')) }
            </Grid>
        </Grid>
    </Grid>
    <Grid spacing={0} xl={10}>
        <Grid container>
            <Grid item xl={9}>
                <h1>Image Goes Here</h1>
            </Grid>
            <Grid item xl={3}>
                <h1>Description</h1>
                { data["description"] }
            </Grid>
        </Grid>
    </Grid>
</Grid>

我不太清楚我哪里出了问题，因为我无法理解 Grid 布局的工作原理。请帮忙？

如果有必要，这里是getGridItems()的代码:

getGridItems = (header, data, chips) => {
    let list = [];
    let fontSize = 11;
    list.push(
        <h5>{ header }</h5>
    );
    if(data.length > 0 && data[0] !== '') {
        if(chips !== undefined && true) {
            data.forEach(value => {
                let chipData = ChipConstants[value];
                list.push(
                    <Grid item xs>
                        <Chip
                            style={{ fontSize: fontSize}}
                            avatar={
                                <Avatar
                                    style={{ width: 24, height: 24 }}
                                    alt={chipData["avatar"]["alt"]}
                                    src={require("../img/avatars/"+chipData["avatar"]["img"])}
                                />}
                            label={chipData["avatar"]["alt"]}
                            className={styles.chip}
                        />
                    </Grid>
                );
            });
        } else {
            data.forEach(value => {
                list.push(
                    <Grid item xs style={{ fontSize: fontSize}}>
                        { value }
                    </Grid>
                );
            });
        }
    } else {
        list.push(
            <Grid item xs style={{ fontSize: fontSize}}>
                None
            </Grid>
        );
    }
    return list;
};

Answer 1

我并没有真正了解您当前的代码与您想要的内容有何关系，因此我不会尝试更正您当前的代码，而只是提供一个起点，该起点提供了您想要的基本结构。

如果您对我的代码中的 Grid 如何工作有具体疑问，我将根据需要进行详细说明。

index.js

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import Button from "@material-ui/core/Button";
import MyDialog from "./MyDialog";

class App extends React.Component {
  state = {
    open: false
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };
  render() {
    return (
      <>
        <CssBaseline />
        <Button variant="contained" onClick={this.handleClickOpen}>
          Open Dialog
        </Button>
        <MyDialog open={this.state.open} handleClose={this.handleClose} />
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyDialog.js

import React from "react";
import Grid from "@material-ui/core/Grid";
import Dialog from "@material-ui/core/Dialog";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    height: "100%"
  },
  project: {
    backgroundColor: "lightblue",
    height: "100%"
  },
  right: {
    height: "100%"
  },
  media: {
    backgroundColor: "lightgreen",
    height: "70%"
  },
  desc: {
    backgroundColor: "yellow",
    height: "30%"
  }
};
const MyDialog = props => {
  return (
    <Dialog fullScreen open={props.open} onClose={props.handleClose}>
      <Grid container className={props.classes.root}>
        <Grid item xs={3} className={props.classes.project}>
          <IconButton
            color="inherit"
            onClick={props.handleClose}
            aria-label="Close"
          >
            <CloseIcon />
          </IconButton>
          Project
        </Grid>
        <Grid item xs={9}>
          <Grid container direction="column" className={props.classes.right}>
            <Grid item className={props.classes.media}>
              Media
            </Grid>
            <Grid item className={props.classes.desc}>
              Description
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Dialog>
  );
};
export default withStyles(styles)(MyDialog);

它位于 CodeSandbox 中，您可以进行试验: