javascript - Material-ui 抛出一个 Element 类型无效我很难使用material-ui Table(我在以前的项目中使用过数十次)。
我目前正在使用@material-ui/core@3.5.1
,我也尝试使用@3.2.0
and @3.6.0
。
我也在使用react@16.3.2
和react-dom@16.2.0
问题描述
我很难使用material-ui Table(我在以前的项目中使用过数十次)。
我目前正在使用@material-ui/core@3.5.1
,我也尝试使用@3.2.0
and @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 的主题提供者下直接使用 MyPagerender()
<MuiThemeProvider theme={theme}>
<MyPage />
</MuiThemeProvider>
我有一些其他页面可以与其他材料 UI 组件一起使用。
如果我更改 SimpleTable 的渲染只是为了返回 a<p>Hello World</p>
而不是整个表的东西,它就可以工作。因此它不能来自默认导出或组件 imo 的全局导入。它可能来自我的 material-ui 导入.. 但它们看起来还不错..
如果有人有想法,请在此处提供一些帮助<3
PS:我试图以“嗨”或“你好”开始我的评论,但似乎他已自动从我的帖子中删除 x)
问题似乎来自与项目其他地方使用的 react-native-web 的冲突。
更新react-native-web
+安装react-art
解决了这个问题。
解决方案
问题似乎来自与项目其他地方使用的 react-native-web 的冲突。
更新react-native-web
+安装react-art
解决了这个问题。
推荐阅读
- php - 从 MySQL 表中检索 Blob URL
- php - IONIC 5 不要将数据发布到 api php
- typescript - 使用非共享属性(TypeScript)时,从对象的联合类型中省略共享属性会导致错误
- php - 在 PHP 中创建一个数组对象
- python - 如果我想通过串口向 arduino 发送数据,我应该一次发送一个长字符串,还是分别发送每个变量?
- vue.js - 有没有办法阻止 v-dialog 关闭?
- ssl - Chrome 浏览器拒绝通过 HTTPS 连接到 AWS CloudFormer 实例
- python - Seaborn 图未显示所有带循环的图
- sql - 在 ODBC 链接的 Access 表中,什么决定了字段大小,以及如何更改它?
- r - R如何以类似编织的方式合并数据帧
我很难使用material-ui Table(我在以前的项目中使用过数十次)。
我目前正在使用@material-ui/core@3.5.1
,我也尝试使用@3.2.0
and @3.6.0
。
我也在使用react@16.3.2
和react-dom@16.2.0
问题描述
我很难使用material-ui Table(我在以前的项目中使用过数十次)。
我目前正在使用@material-ui/core@3.5.1
,我也尝试使用@3.2.0
and @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 的主题提供者下直接使用 MyPagerender()
<MuiThemeProvider theme={theme}>
<MyPage />
</MuiThemeProvider>
我有一些其他页面可以与其他材料 UI 组件一起使用。
如果我更改 SimpleTable 的渲染只是为了返回 a<p>Hello World</p>
而不是整个表的东西,它就可以工作。因此它不能来自默认导出或组件 imo 的全局导入。它可能来自我的 material-ui 导入.. 但它们看起来还不错..
如果有人有想法,请在此处提供一些帮助<3
PS:我试图以“嗨”或“你好”开始我的评论,但似乎他已自动从我的帖子中删除 x)
问题似乎来自与项目其他地方使用的 react-native-web 的冲突。
更新react-native-web
+安装react-art
解决了这个问题。
问题似乎来自与项目其他地方使用的 react-native-web 的冲突。
更新react-native-web
+安装react-art
解决了这个问题。