Блог

Главная - Вопросы по программированию - Итерация значений в сетке и карточке в React

Итерация значений в сетке и карточке в React

#javascript #reactjs #ecmascript-6 #material-ui #react-hooks

#javascript #reactjs #ecmascript-6 #материал-пользовательский интерфейс #реагирующие хуки

Вопрос:

Я хотел получить как можно меньше кода, поэтому я внедрил в свое приложение повторно используемый компонент. Моя проблема в том, как я могу выполнить итерацию столбцов и строк в Grid , Card и Table . Что будет лучшим решением для этого?

Пожалуйста, проверьте мой codesandbox

Нажмите здесь

Ожидаемый результат

введите описание изображения здесь

Код

   <Grid container spacing={2}>
    {rows.map((row, index) => (
      <Grid item md={4} sm={6} xs={12} key={index}>
        <CardComponent columns={columns} rows={row} />
      </Grid>
    ))}
  </Grid>

Ответ №1:

Вот как я бы это сделал, не слишком сильно меняя ваш исходный код

https://codesandbox.io/s/material-demo-forked-nk293

demo.js

   const columns = [
    { headerName: "ID", field: "id" },
    { headerName: "Request", field: "request" }
  ];

card.js

                 <TableCell variant="body">{row[column.field]}</TableCell>

Это «похоже» на API material-table

Комментарии:

1. Спасибо за это. Что, если бы я хотел добавить a <Button> , и я добавил также переменную с именем ‘dontDisplay`, которую я не хочу отображать. Пожалуйста, проверьте этот codesandbox. codesandbox.io/s/material-demo-forked-h9ji8?file=/demo.js

2. Вы меняете структуру моего кода на лучшую. Спасибо

3. Итак, это dontDisplay не логическое значение, это строка, что она должна скрывать?

4. Извините за путаницу. Пожалуйста, не обращайте внимания на dontDisplay . Как я могу добавить <Button> id туда с помощью? Это вне итерации, верно? Кстати, вы можете реструктурировать мой код

5. codesandbox.io/s/material-demo-forked-xvjjy Вы можете получить доступ к идентификатору прямо там, потому что он находится в строке, надеюсь, это поможет 🙂

Ответ №2:

Вот мой ответ без изменения структуры столбцов и строк:

 <TableRow>
    <TableCell variant="head">{column.headerName}</TableCell>
    
    <TableCell variant="body">
            {rows[Object.keys(rows)[index]]}
    </TableCell>
</TableRow>