Material-ui <Table/> 抛出一个Element type is invalid

Posted 2023-02-22

【中文标题】Material-ui <Table/> 抛出一个Element type is invalid

【英文标题】：Material-ui <Table/> throw an Element type is invalid

【发布时间】：2019-05-01 14:06:41

【问题描述】：

我在使用 material-ui 表时遇到了困难（我在以前的项目中使用过数十次）。

我目前正在使用@material-ui/core@3.5.1，我也尝试使用@3.2.0 和@3.6.0。

我也在使用react@16.3.2 和react-dom@16.2.0

我的项目中有一些来自 material-ui 的其他组件（按钮、TextField...），它们运行良好，但是，当我尝试使用 SimpleTable 示例时，出现以下错误：

我尝试在一个全新的项目中使用它 => 它有效。

这就是为什么我尝试从一个版本切换到另一个版本但仍然无法正常工作的原因。我不知道我的错误在哪里:(。

这是我的 SimpleTable 组件（来自 mui 文档的完美副本/过去）：

import React from 'react';
import PropTypes from 'prop-types';
import  withStyles  from '@material-ui/core/styles';
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';

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 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)
];

function SimpleTable(props) 
    const  classes  = props;

    return (
        <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>
                    rows.map(row => 
                        return (
                            <TableRow key=row.id>
                                <TableCell component="th" scope="row">
                                    row.name
                                </TableCell>
                                <TableCell numeric>row.calories</TableCell>
                                <TableCell numeric>row.fat</TableCell>
                                <TableCell numeric>row.carbs</TableCell>
                                <TableCell numeric>row.protein</TableCell>
                            </TableRow>
                        );
                    )
                </TableBody>
            </Table>
        </Paper>
    );


SimpleTable.propTypes = 
    classes: PropTypes.object.isRequired
;

export default withStyles(styles)(SimpleTable);

我是这样使用的：

import React from 'react';
import SimpleTable from './Table';

export const MyPage = () => (
    <div>       
        <SimpleTable />
    </div>
);

我在 App render() 的主题提供者下直接使用 MyPage

 <MuiThemeProvider theme=theme>
     <MyPage />        
 </MuiThemeProvider>

我有一些其他页面可以与其他材料 UI 组件一起使用。

如果我更改 SimpleTable 的呈现只是为了返回 <p>Hello World</p> 而不是整个表的内容，它就可以工作。因此它不能来自默认导出或组件 imo 的全局导入。 它可能来自我的 material-ui 导入.. 但它们看起来还不错..

如果有人有想法，请在此处提供一些帮助

PS：我试图以“嗨”或“你好”开始我的评论，但似乎他已自动从我的帖子中删除 x)

【问题讨论】：

你是如何使用MyPage的？

我觉得不是material-ui的问题，只是你导入/导出或者声明组件的方式有问题。

我编辑了我的帖子，但我使用它的方式与我使用其他组件的方式完全相同。

如果我更改 SimpleTable 的渲染只是为了返回 <p>Hello World</p> 而不是整个表格的东西，它就可以工作。所以它不能来自默认导出或来自<SimpleTable>组件imo的全局导入

【参考方案1】：

问题似乎来自与项目其他地方使用的 react-native-web 冲突。

更新react-native-web + 安装react-art 解决了这个问题。