React 中的选项卡错误：检查 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>

        ]
....

但出现以下错误：

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

检查 TabPanel 的渲染方法。

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