Material-ui <Table/> 报错：Element 类型无效

Question

我在使用 material-ui Table（在之前的项目中已经用了很多次）时遇到了困难。

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

我的项目中还使用了其他 material-ui 的组件（如 Button、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>
);

我在应用程序的主题提供者下直接使用MyPage在render()中

 <MuiThemeProvider theme={theme}>
     <MyPage />        
 </MuiThemeProvider>

我有一些其他页面，与其他Material-UI组件配合使用。

如果我只是更改SimpleTable的渲染方式，使其返回<p>Hello World</p>而不是整个表格内容，它可以正常工作。所以我认为这不可能来自默认导出或全局导入该组件。 可能是来自我的Material-UI导入..但它们看起来没问题..

如果有人有想法，帮助将非常感激<3

PS：我尝试用“Hi”或“Hello”开始我的评论，但似乎被自动从我的帖子中删除x)

- llccrr

---

你如何使用 MyPage？ - Sebastian

我认为这不是material-ui的问题。这只是你导入/导出或声明组件的方式有问题。 - Root

我编辑了我的帖子，但是我正在像使用其他组件一样使用它。 - llccrr

如果我更改了SimpleTable的渲染方式，只返回一个<p>Hello World</p>而不是整个表格内容，那么它是有效的。因此，在我看来，这不能来自于默认导出或全局导入<SimpleTable>组件。 - llccrr

Answer 1

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

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

- llccrr