Question

我在Material-ui Table上遇到了麻烦（我在以前的项目中使用了数十次）。

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

我也在使用@3.6.0和react@16.3.2

我还有其他一些组件（按钮，文本字段... ）从我的项目中的material-ui正常运行，但是，当我尝试使用react-dom@16.2.0示例时，出现以下错误：

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

这就是为什么我尝试从一个版本切换到另一个版本，但仍然无法正常工作的原因。我无法弄清楚我的错误在哪里：（。

这是我的SimpleTable组件（来自mui文档的完美复制/粘贴）：

SimpleTable

我正在使用它如下：

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

render()

的主题提供者下使用MyPage，我还有其他页面

如果我更改SimpleTable的呈现方式只是返回一个<MuiThemeProvider theme={theme}> <MyPage /> </MuiThemeProvider>而不是整个表的内容，那它就可以了，所以它不能来自默认导出或从组件imo的全局导入。

如果有人有想法，可以对位于<3

PS的地方有所帮助，这是我尝试的以“ Hi”或“ Hello”开始我的评论，但似乎他已自动从我的帖子中删除x）

Answer 1

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

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

Material-ui抛出Element类型无效

1 个答案: