當我渲染頁面時，頁面變得無回應

在我的專案中，我有簡單的兩個組件 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;

我的專輯.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

我的卡片.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

使用給出的第一個答案后收到此錯誤

uj5u.com熱心網友回復：

你沒有Card在你的Card.js

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

uj5u.com熱心網友回復：

在同一個檔案中，兩個 const(Component) 不能同名。你有 2 個選擇

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

標籤：反应 反应原生 反应还原

上一篇：Python腳本無法呼叫JiraRESTAPI

下一篇：ReactNativeHorizo??ntalScrollView沒有完全滾動