React 中的 Tab 错误:检查 TabPanel 的渲染方法

Question

我想使用以下代码使用材料设计选项卡：

import React, { PureComponent } from 'react'
import { Field, reduxForm,change } from 'redux-form'
import PropTypes from 'prop-types'
import { Update,Get } from '../../_actions/baseInfo/reseller'
import { connectTo } from '../../_utils/generic'
import { isValid } from '../../_utils/forms'
import textfield from '../../_components/fields/textfield/textfield'
import UpdateForm from '../../_components/updateForm/updateForm'
import styles from './Styles.module.scss'
import { getCustomerType } from '../../_actions/generic'
import { withStyles } from '@material-ui/core/styles'
import { Filter as FilterResellers } from '../../_actions/baseInfo/reseller'
import { Filter as FilterRegions } from '../../_actions/baseInfo/region'
import { Filter as FilterCities } from '../../_actions/baseInfo/city'
import { Filter as FilterAccounting } from '../../_actions/baseInfo/accounting'
import filterField from '../../_components/fields/filterField/FilterField'
import {AppBar, Tab,Tabs } from '@material-ui/core';
import {Typography} from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import { Paper } from '@material-ui/core';
import selectField from '../../_components/fields/selectField/selectField'
import classNames from 'classnames';
import dateField from '../../_components/fields/dateField/dateField'
import checkbox from '../../_components/fields/checkbox/checkbox'
import { Break } from '../../_components/Break';
import filefield from '../../_components/fields/filefield/filefield';
....
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
<Box p={3}>{children}</Box>
</Typography>
);
}

TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};

class UpdatePage extends PureComponent {
constructor(props) {
super(props)
this.state = {
value:0,
}
}
handleChange(event, newValue){
this.setState({value:newValue})
}
a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
componentDidMount() {
const { Get,match:{params:{resellerId}} } = this.props
Get({resellerId})
}
render() {
const { handleSubmit, enabledSubmit,match:{params:{resellerId}} } = this.props
const fields = [
<div>
<AppBar position="static">
<Tabs onChange={this.handleChange} value={this.state.value} aria-label="simple tabs example">
<Tab label="One" {...this.a11yProps(0)} />
<Tab label="Two" {...this.a11yProps(1)} />
<Tab label="Three"  {...this.a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={this.state.value} index={0}>
<label>1</label>
</TabPanel>
<TabPanel value={this.state.value} index={1}>
<label>2</label>
</TabPanel>
<TabPanel value={this.state.value} index={2}>
<label>3</label>
</TabPanel>
</div>
]
....

但发生以下错误：

元素类型无效：需要字符串(对于内置组件( 或类/函数(用于复合组件(，但得到：未定义。你 可能忘记从定义组件的文件中导出组件， 或者，您可能混淆了默认导入和命名导入。

检查选项卡面板的呈现方法。

Answer 1

render return 语句在哪里？添加返回字段;

render() {
const { handleSubmit, enabledSubmit,match:{params:{resellerId}} } = this.props
const fields = [
...
];
return fields;
}

Answer 2

这是问题所在：

import Typography from '@material-ui/core/Typography';

您正在将其作为命名导入{Typography}

导入要将其作为命名导入获取，请执行以下操作：

import { Typography } from '@material-ui/core';