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

Question

在我的项目中，我有两个简单的组件 Album 和 card 当我尝试在 app.js 中呈现卡片组件时，页面永远不会加载，它给我错误，页面变得没有响应，当我发表评论时页面完美加载的卡片我到目前为止还没有做任何大事我刚刚创建了一个导航栏并想在那里放一张卡片

我的app.js

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

import './App.css';

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

export default App;

我的album.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

您没有在 Card.js

中导入 Card

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

Answer 2

在同一个文件中，两个const(Component) 不能同名。你有2个选项

将组件的名称从 Card 更改为 MyCard。
从 '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

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

When I am rendering a a page the page is getting unresponsive

reactjs

react-native

react-redux