反应组件和 gatsby JS 的问题答案

【问题标题】：Issue with react component and gatsby JS反应组件和 gatsby JS 的问题
【发布时间】：2022-01-16 15:43:40
【问题描述】：

我正在尝试使用 Gatsby js 创建一个投资组合网站，并且我正在尝试使用 gatsby-plugin-material-ui 包中的卡片组件。我在组件文件夹中的单独文件中有该卡，并将其导出以用于我的实际项目页面文件。当我在 localhost 上加载网站时，除了点击项目按钮导航到项目页面外，一切都正常加载。一旦我尝试访问该页面，我就会收到此错误

./node_modules/react-dom/cjs/react-dom.development.js:25058 中的函数 createFiberFromTypeAndProps 出错

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

这是我创建和导出组件的代码

import * as React from "react"
import Card from 'gatsby-plugin-material-ui';
import CardContent from 'gatsby-plugin-material-ui';
import CardMedia from 'gatsby-plugin-material-ui';
import Typography from 'gatsby-plugin-material-ui';
import { CardActionArea } from 'gatsby-plugin-material-ui'

const Cards = () => {

    return (
        <div className="cardsTest">
            <Card sx={{ maxWidth: 345 }}>
                <CardActionArea>
                    <CardMedia
                        component="img"
                        height="140"
                        image="../images/space.jpg"
                        alt="Gagan Toronto"
                    /> 
                        <CardContent>
                            <Typography gutterBottom variant="h5" component="div">
                                Space Card
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                                This is just a placeholder card 
                            </Typography>
                        </CardContent>
                </CardActionArea>
            </Card>    
         </div>
    )

}

export default Cards

这是我导入组件以用于我的项目页面的代码

import * as React from "react"

//components used across site
import Header from "../components/header"
import Cards from "../components/Cards"

const ProjectPage = () => (
    <div>
    <Header />
    <Cards />
    </div>
  )

export default ProjectPage;

我觉得这是我如何导出组件的问题，但我不确定它是什么，任何帮助将不胜感激:)

【问题讨论】：

标签： javascript reactjs material-ui gatsby gatsby-plugin

【解决方案1】：

我觉得这是我如何导出组件的问题，但我我不确定它是什么，任何帮助将不胜感激:)

确实，您对Cards 组件的某些导入似乎是错误的。我认为导致问题的原因是CardActionArea，但如果您可以通过将它们全部注释并一一导入来检测哪个是很好的。

我会尝试像这样导入：

import CardActionArea from 'gatsby-plugin-material-ui'

【讨论】：