react-swipable-views使用时显示错误

Question

我正在尝试在我的react应用程序中使用react-swipable-views。我收到以下错误:- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我将其导入如下：

import SwipeableViews from "react-swipeable-views";

用法：

import React, { Component } from 'react';
import './../index.css';
import { 
    Tabs, 
    Tab, 
    Grid, 
    Paper, 
    Typography,
    Box,
    Icon
} from '@material-ui/core';
import PropTypes from 'prop-types';


import A from './components/A/A';
import B from './components/B/B';
import C from './components/C/C';
import D from './components/D/D';
import E from './components/E/E';


import SwipeableViews from "react-swipeable-views";

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}
      >
        {value === index && <Box p={3}>{children}</Box>}
      </Typography>
    );
  }

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

  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

export default class Entities extends Component {

    state = {
        value: 0
    }

    handleChange = (event, newValue) => {
        this.setState({value: newValue});
    }

    handleChangeIndex = index => {
        this.setState({value: index});
    }

    render() {
        const {value} = this.state;

        return(
            <div className="container-info">
                <Grid container>
                    <div className="padding-top-4 padding-left-0">
                        <Paper>
                            <Tabs value={value} onChange={this.handleChange}>
                                <Tab label={<span className="font-bold">A</span>}/>
                                <Tab label={<span className="font-bold">B</span>}/>
                                <Tab label={<span className="font-bold">C</span>}/>
                                <Tab label={<span className="font-bold">D</span>}/>
                                <Tab label={<span className="font-bold">E Types</span>}/>
                            </Tabs>
                        </Paper>
            <SwipeableViews>
                            <TabPanel value={value} index={0}>
                                <A />
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                <B />
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                <C />
                            </TabPanel>
                            <TabPanel value={value} index={3}>
                                <D />
                            </TabPanel>
                            <TabPanel value={value} index={4}>
                                <E />
                            </TabPanel>
            </SwipeableViews>
                    </div>
                </Grid>
            </div>
        );
    }
}

 }

如何解决此错误？

Answer 1

将react-swipeable-views降级到0.13.3，使用0.13.3到0.13.6可以修复所有最近的问题。issues

Answer 2

将您的元素包装在SwipeableViews标记中。

<SwipeableViews>

 <TabPanel value={value} index={0}>
    <A />
 </TabPanel>
 <TabPanel value={value} index={1}>
    <B />
 </TabPanel>
</SwipeableViews>