当我呈现页面时，页面变得无响应

Question

在我的项目中，当我尝试在 app.js 中呈现卡片组件时，我有简单的两个组件 Album 和 card加载完美，到目前为止，我还没有做任何大事，我刚刚创建了一个导航栏并希望在其中放一张卡片

我的 app.js

import Album from './components/Album';
// import Card from './components/Card';

import './App.css';

function App() {
  return (
    <>
    <Album/>
    {/* <Card/> */}
    </>
  );
}

export default App;

我的专辑.js

import React from 'react'
import { Container,Navbar,Nav,NavDropdown,FormControl,Form,Button } from 'react-bootstrap'
// import  "./style.css";

const Album = () => {
    return (
        <>
            <Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#">Amna Gallery</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
        <Nav.Link href="#action1">Home</Nav.Link>
        <NavDropdown title="Link" id="navbarScrollingDropdown">
          <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
          <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action5">
            Something else here
          </NavDropdown.Item>
        </NavDropdown>
      </Nav>
      <Form className="d-flex">
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
        />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Container>
</Navbar>
        </>
    )
}

export default Album

我的 card.js

import React from 'react'
import { Button } from 'react-bootstrap'

const Card = () => {
    return (
        <div>
            <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
        </div>
    )
}

export default Card

使用给出的第一个答案后得到此错误

Answer 1

在同一个文件中，两个 const(Component) 不能具有相同的名称。 你有两个选择

1. 将组件的名称从 Card 更改为 MyCard。
2. 从 'react-bootstrap' 导入 { Button, Card as BTCard } 并在您的 Card 组件中使用 BTCard

参考代码 选项 1：MyCard.jsx

import React from 'react'
import { Button,Card } from 'react-bootstrap'

const MyCard = () => {
    return (
        <div>
            <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
        </div>
    )
}

export default MyCard

选项 2：重命名 Boostrap 的 Card 组件

import React from 'react'
import { Button, Card as BTCard } from 'react-bootstrap'

const Card = () => {
    return (
        <div>
            <BTCard style={{ width: '18rem' }}>
  <BTCard.Img variant="top" src="holder.js/100px180" />
  <BTCard.Body>
    <BTCard.Title>Card Title</BTCard.Title>
    <BTCard.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </BTCard.Text>
    <Button variant="primary">Go somewhere</Button>
  </BTCard.Body>
</BTCard>
        </div>
    )
}

export default Card

Answer 2

您没有在Card.js 中导入Card

import { Button, Card } from 'react-bootstrap'