Question

我花了一天的大部分时间徒劳地试图获得这个“简单”的演示表，我在Material_UI Simple Table Demonstration找到了一个涵盖表对象的文档。 Material_UI包。我没有尝试过任何工作;它曾经是好的，它可以编译，但在任何Web浏览器中打开时都会出现问题;我尝试过Edge和Chrome两种相同的结果。虽然应用程序编译，但在Edge或Chrome中打开时，它会立即报告类型错误：无法获取属性＆＃39; root＆＃39;未定义或空引用。

为了做到这一点，我对上面引用的演示脚本进行了两次修改。我修改过的脚本如下。

/*
    ============================================================================
    File Name:          /material_ui_table_demo/src/index.js

    File Abstract:      This file contains my slightly modified version of the
                        SimpleTable demonstration app shown in the material_UI
                        documentation page for the Table element.

    Remarks:            I made two changes, both marked with comments prefixed
                        with "2018/04/03 DAG:."

    File Author:        David A. Gray, MBA

    Reference:          https://material-ui-next.com/demos/tables/

    ----------------------------------------------------------------------------
    Revision History
    ----------------------------------------------------------------------------

    Date       By  Synopsis
    ---------- --- -------------------------------------------------------------
    2018/04/03 DAG Completed and tested
    ============================================================================
*/

import React from 'react';
import ReactDOM from 'react-dom';                           // 2018/04/03 DAG: Copied from tic_tac_toe/src/index.js to satisfy ReactDOM.render
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}
const data = [
  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),
];
function SimpleTable(props) {
  const { classes } = props;
return (
    <div className = {classes.root}>
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Dessert (100g serving)</TableCell>
                        <TableCell numeric>Calories</TableCell>
                        <TableCell numeric>Fat (g)</TableCell>
                        <TableCell numeric>Carbs (g)</TableCell>
                        <TableCell numeric>Protein (g)</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                                    <TableRow key={n.id}>
                                        <TableCell>{n.name}</TableCell>
                                        <TableCell numeric>{n.calories}</TableCell>
                                        <TableCell numeric>{n.fat}</TableCell>
                                        <TableCell numeric>{n.carbs}</TableCell>
                                        <TableCell numeric>{n.protein}</TableCell>
                            </TableRow>
                                );
                    })}
                </TableBody>
            </Table>
        </Paper>
    </div>
  );
}
SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

//  ----------------------------------------------------------------------------
//  2018/04/03 DAG: Since both apps have this block, I copied it from
//                  tic_tac_toe/src/index.js.
//  ----------------------------------------------------------------------------

ReactDOM.render(
  <SimpleTable />,
  document.getElementById ( 'root' )
);

export default withStyles(styles)(SimpleTable);

我说明的问题陈述位于this small Microsoft Word document，应用程序位于this 7-zip archive，其中包含所有内容，包括由React Starter Kit中的脚本填充并使用Material_UI进行扩充的本地node_modules目录@next，每the directions given here。

因为我不能得到这个＆＃34;简单＆＃34;演示渲染，我很快就失去了对Material_UI包的信心。然而，在我把它作为更多的谷歌宣传之前写下来之前，我想在这个问题上再看一双或两眼，看看是否有一些我忽略的简单。

海陵频率是开放的。

Answer 1

结果证明这个答案看似简单;指定一个高度（隐式地以像素为单位，它会出现），并将样式常量作为classes属性的值传递，该属性在表定义的末尾紧接在上面标记为必需。

updated source code包含一小段更改，位于Code.OMs块中，位于index.js的最底部。

ReactDOM.render(
  <SimpleTable height="700"
               classes={styles} />,
  document.getElementById ( 'root' )
);

如果实际上完成并且准备好运行，那么Material_UI文档中提供的示例会更有用。

React的材质用户界面：简单的桌面演示无法渲染

1 个答案: