javascript - 初学者困惑: Four Quadrant Selection Grid in a Pop-Up Form Using Material UI & React

Question

如果这些问题听起来很愚蠢，我深表歉意。我正在尝试进入 React 和 Material-UI，但没有导师可以向我提问或指导我。当我使用文档和教程等时，有点像在黑暗中拍摄。我有很多问题。 (事实上​​，是否有更好的地方可以提出这些一次性的快速问题？也许是初学者聊天论坛？Slack 小组？不确定 Stack 是否是最好的地方..)

我正在为客户构建一个表单。其中一个问题是四象限图，用户在其中选择一个组合 4 个不同向量的选项。这很难解释，而且我不确定这种类型的图表的技术术语是什么，所以我画了一个图表来清楚地表明我想要实现的目标:

我开始在 React 中构建一个组件来处理这个选择图表，但我已经有点迷失了..这是我到目前为止所拥有的......

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  h2: { //<-- is there a better way to do this? Or do I need to target each h2 with a className classes.h2 ?
    color: "#f00",    
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  card: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
}));

export default function ProjectMap() {
  const classes = useStyles();

  function Slow_Expensive() {
    return (
      <Card className={classes.card}>
      <CardActionArea>
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            Selection box slow but expensive.
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
    );
  }


  function TopRow() {
    return (
      <React.Fragment>
        <Grid item xs={4}></Grid>
        <Grid item xs={4}>
          <h2>Expensive</h2>
        </Grid>
        <Grid item xs={4}></Grid>
      </React.Fragment>
    );
  }

  function MidRow() {
    return (
      <React.Fragment>
        <Grid item xs={4}>
          <h2 className={classes.h2}>Slow</h2> {/*Do I need to set a className on all of my h2's or is there a better way to target all of them within this component. */}
        </Grid>
        <Grid item xs={4}>
          <h2>The Four Quadrants go here.. maybe cards assembled into maybe another grid?? a table??</h2>
        </Grid>
        <Grid item xs={4}>
          <h2>Fast</h2>
        </Grid>
      </React.Fragment>
    );
  }

  function BotRow() {
    return (
      <React.Fragment>
        <Grid item xs={4}></Grid>
        <Grid item xs={4}>
           Cheap
        </Grid>
        <Grid item xs={4}></Grid>
      </React.Fragment>
    );
  }

  return (
    <div className={classes.root}>
    <h2>Choose one of hte options:</h2>
      <Grid container spacing={1}> {/*is grid the best way to layout this component? Should I use a table instead?*/}
        <Grid container justify="center" item  xs={12} spacing={2}>{/* Justify is not working.. I don't know why?*/}
          <TopRow />
        </Grid>
        <Grid container justify="center" item  xs={12} spacing={2}>
          <MidRow />
        </Grid>
        <Grid container justify="center"  item xs={12} spacing={2}>
          <BotRow />
        </Grid>
      </Grid>
    </div>



  );
}

1. 我仍在学习 Material-UI 的网格如何工作。我来自一个 传统的 Vanilla JS/CSS/HTML 背景，回到我们的时代 过去常常使用表格来布局像这样的小部件。在我的代码中 上面我尝试使用以下方法构建表格布局 Material-UI 中的响应式网格系统。这是愚蠢的吗？或者我是在 正确的轨道上？像这样的小组件可以使用网格吗？或者是 适用于较大的布局元素，例如菜单和页面容器？
2. 我正在尝试使用卡片来表示四个象限，但是我该怎么做 将它们组装到我更大的网格中？我需要嵌套另一个网格吗 在更大的网格内？或者我应该使用某种网格 rowSpan 还是 colSpan？网格能做到这一点吗？
3. 我正在考虑使用 React 单选框并将其设计为 div 因为这将处理单击/选择功能，但我 决定使用“Cards”并仅使用 javascript 使它们像 单击时的单选框。
4. 我不完全理解 useStyles 钩子(Hook)在这里是如何使用的。我知道 它的目的是覆盖 Material-UI 组件样式，但我是吗？ 应该用它来做所有事情吗？例如我正在使用标签 对于图表标签，因为从语义上看它们似乎是图表 标题，但要设置它们的样式，我需要将它们添加到我的 useStyles 中吗 函数，然后将 className={classes.h2} 添加到我的所有 H2 中？ 似乎必须有更好的方法来设计这些元素 在我的图表组件中全局。我应该简单地使用 CSS 模板附加到我的组件吗？喜欢:导入 './Chart.css';?
5. 我在这个项目中的每个其他组件也使用“useStyles”，但是 我注意到其中一些有效，有些则无效。例如我尝试过 将对话框大小调整为 80% 宽度，但是当我尝试应用它时 使用 className={classes.dialogue} 到我的对话框，样式 不适用。我最终使用 maxWidth = {'md'} 属性来获取 它可以延伸得更宽，但这是最好的方法吗？

s

<Dialog className={classes.root} 
        open={this.state.dialogOpen} 
        onClose={this.onDialogClose}

        maxWidth = {'md'}
        >

让我知道您的想法...任何有关如何解决这些问题的提示或建议将不胜感激。

谢谢!

Answer 1

您需要支持 Internet Explorer 吗？如果没有，实现此目的的最简单方法是使用 css grid .

这是一个例子:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";

import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles({
  paper: {
    display: "grid",
    gridTemplateColumns: "3rem 250px 250px 3rem",
    gridTemplateRows: "3rem 250px 250px 3rem",
    gridGap: "1rem",
    justifyItems: "center",
    alignItems: "center",
    justifyContent: "center"
  },
  top: {
    gridRow: "1 / 2",
    gridColumn: "1 / 5"
  },
  bottom: {
    gridRow: "4 / 5",
    gridColumn: "1 / 5"
  },
  left: {
    gridRow: "2 / 4",
    gridColumn: "1 / 2"
  },
  right: {
    gridRow: "2 / 4",
    gridColumn: "4 / 5"
  },
  card: {
    width: "100%",
    height: "100%"
  }
});

function MyCard({ title }) {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography>{title}</Typography>
      </CardContent>
    </Card>
  );
}

function Quadrants() {
  return (
    <React.Fragment>
      <MyCard title="Slow but expensive" />
      <MyCard title="Fast but expensive" />
      <MyCard title="Slow but Cheap" />
      <MyCard title="Slow but Fast" />
    </React.Fragment>
  );
}

function FourQuadrants() {
  const classes = useStyles();

  return (
    <Paper className={classes.paper}>
      <Typography className={classes.top}>Expensive</Typography>
      <Typography className={classes.bottom}>Cheap</Typography>
      <Typography className={classes.left}>Slow</Typography>
      <Typography className={classes.right}>Fast</Typography>
      <Quadrants />
    </Paper>
  );
}

export default FourQuadrants;

实例: