Как использовать компонент Grid Material-UI, как мне вложить таблицу в другую таблицу? - PullRequest
Новая
       28

Как использовать компонент Grid Material-UI, как мне вложить таблицу в другую таблицу?

0 голосов
/ 25 апреля 2020

Я создаю приложение React 16.13.0 и пытаюсь использовать Grid-компонент material-ui. У меня проблемы с вложением сетки в сетку. Я хочу вложить эту таблицу 

          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>

в таблицу большего размера. В приведенном выше примере я ожидаю, что ячейка «Значок» и другая ячейка находятся в одной строке. Однако, когда я помещаю его в таблицу большего размера 

<Grid container spacing={1} alignItems="center">
  <React.Fragment key={`content-item-${mission.id}`}>
    <Grid container direction="column">
      <Grid item container spacing={2}>
        <Grid item xs={1}>
          PICK Up
        </Grid>
        <Grid container item xs={1}>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up location {mission.pickUpLocation}</Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

, в верхней части ячейки появляется значок с текстом «Окно подбора миссии».

enter image description here

Как правильно структурировать мою сетку?

1 Ответ

0 голосов
/ 26 апреля 2020

Сетка - это не совсем таблица, но если вы хотите вложить сетки, вы можете просто на контейнере сетки внутри элемента сетки: 

  <Grid container spacing={3}>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      This grid is nested:
      <Grid container>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
      </Grid>
    </Grid>
    <Grid item xs={12} sm={6}>
      Here there is no nested grid:
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
  </Grid>

Вы можете увидеть это в действии здесь: https://codesandbox.io/s/material-nested-grid-9s7lq?file= / demo. js

В своем коде вы помещаете Grid-Item в другой Grid-Item (вы не должны этого делать), а также Grid-Container в другой Grid-Item. Контейнер (также не очень хороший).

В общем, это то, что вам нужно запомнить:

  • Сетка-контейнер является оберткой, если элементы сетки.
  • Если вы хотите иметь вложенную сетку - поместите новый контейнер-сетку внутри элемента сетки и используйте его так же, как указано выше.
...