错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）

Question

我对 ReactJS 比较陌生，刚刚开始制作一个投资组合项目。当我运行该程序时，它不会在编辑器中显示任何错误，而是在浏览器中显示以下错误。错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查HomePage.这是我的HomePage.jsimport React from 'react';import Hero from '../components/Hero';import Carousel from '../components/Carousel';function HomePage(props) {    return(        <div>            <Hero title={props.title} subTitle={props.subTitle} text={props.text} />            <Carousel />        </div>    );}export default HomePage;Hero.jsimport React from 'react';import Jumbotron from 'react-bootstrap/Jumbotron';import Container from 'react-bootstrap/Container';import Row from 'react-bootstrap/Row';import Col from 'react-bootstrap/Col';function Hero(props) {    return(        <Jumbotron className="bg-transparent jumbotron-fluid p-0">            <Container fluid={true}>                <Row className="justify-content-center py-5">                    <Col md={8} sm={12}>                        { props.title && <h1 className="display-1 font-weight-bolder">{props.title}</h1> }                        { props.subTitle && <h3 className="display-4 font-weight-light">{props.subTitle}</h3> }                        { props.text && <h3 className="lead font-weight-light">{props.text}</h3> }                    </Col>                </Row>            </Container>        </Jumbotron>    );}export default Hero;进口是绝对正确的。如何解决此错误？

Answer 1

如果您提供的代码是完整的，那么看起来您没有导出Hero.js文件中的任何内容。

添加

export default Hero

最后Hero.js，应该解决问题。

Answer 2

我认为问题在于您将道具传递给HomePage.js，但也许您没有任何道具，或者您的道具是一个对象heroText={props.heroText}，即您将其称为错误：props.title而不是props.heroText.title.

你要传递的道具是HomePage.js什么？