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

Question

我对 ReactJS 比较陌生，刚刚开始制作一个投资组合项目。

当我运行该程序时，它不会在编辑器中显示任何错误，而是在浏览器中显示以下错误。

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

检查HomePage.

这是我的HomePage.js

import 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.js

import 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&nbsp;default&nbsp;Hero最后Hero.js，应该解决问题。

Answer 2

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