Как создать состояние и назначить строки таблицы материалов со статическими данными - PullRequest
Новая
       16

Как создать состояние и назначить строки таблицы материалов со статическими данными

0 голосов
/ 27 сентября 2019

Я использую компонент Table-UI Table для создания таблицы в UI.В приведенном ниже коде я добавляю статические данные без использования состояния, поэтому теперь я хочу узнать, как назначить статические данные для строк таблицы, используя свойство state реагирования.

Я пробовал ниже код, он работает нормально.Но теперь я хочу отобразить таблицу со статическими данными, используя свойство состояния 

import React from 'react';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';



function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function SimpleTable() {

  return (
    <Paper >
      <Table >
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="righty">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

1 Ответ

0 голосов
/ 27 сентября 2019

Вы можете использовать что-то вроде этого: 

function App() {
  return (
    <Comp1 state="something" />
  );
}

function Comp1(props) {
  return (
    <div>{props.div}</div>
  );
}

С помощью props вы можете добавить столько атрибутов, сколько пожелаете.

...