Error: Element type is invalid: expected a string (for built-in components) or a class/function et cetera

Question

我正在尝试构建一种 React 应用程序，但出现标题中提到的错误。我是初学者，当涉及到反应时，我正在遵循教程，其中包含以下代码。解决这个问题对我来说是一个很好的教训。

Product.js -

import React from "react";
import { Card } from "react-bootstrap";
 
function Product({ product }) {
  return (
    <Card className="my-3 p-3 rounded">
      <a href={`/product/${product._id}`}>
        <Card.Img src={product.image} />
      </a>
 
      <Card.body>
        <a href={`/product/${product._id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
 
        <Card.Text as="h3">${product.price}</Card.Text>
      </Card.body>
    </Card>
  );
}

export default Product;

HomeScreen.js -

import React from "react";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
 
import products from "../products";
 
function HomeScreen() {
  return (
    <div>
      <h1>Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}
 
export default HomeScreen;

App.js -

import { Container } from "react-bootstrap";
 
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
 
function App() {
  return (
    <div>
      <Header />
      <main className="py-3">
        <Container>
          <HomeScreen />
        </Container>
      </main>
      <Footer />
    </div>
  );
}
 
export default App;

index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

有人可以帮我吗？非常感谢您。

Answer 1

这可能是因为您在某个卡片组件上输入错误。

查看源代码https://github.com/react-bootstrap/react-bootstrap/blob/v1.4.0/src/Card.tsx#L146

你应该使用

<Card.Body>

而不是

<Card.body>

完整列表在这里https://github.com/react-bootstrap/react-bootstrap/blob/v1.4.0/src/Card.tsx#L143-L151

Error: Element type is invalid: expected a string (for built-in components) or a class/function et cetera

Error: Element type is invalid: expected a string (for built-in components) or a class/function et cetera

rendering

reactjs

react-bootstrap