反應渲染不顯示任何東西-有解無憂

我在反應中創建了這個導航欄組件

import './nav.css';
import react from 'react'

export default function NavBar() {
  return (

    // bootstrap navbar component
<div className = "NavDiv ml-auto"> 
<div className = "topPortion "  >
<nav className="navbar navbar-expand-lg navbar-dark ">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">Get the app</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse ms-auto justify-content-end " id="navbarNav">
      <ul className="navbar-nav ms-auto ">
       
        <li className="nav-item">
          <a className="nav-link active " href="#">
          Add Restaurant
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link active" href="#">Login</a>
        </li>
        <li className="nav-item">
          <a className="nav-link active">SignUp</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</div>
<img className= "zomatoPic" src = "https://b.zmtcdn.com/web_assets/8313a97515fcb0447d2d77c276532a511583262271.png" alt= "zomato name pic" />
<h2 className="zomatoPic2"> Discover the best food & drinks in chennai </h2>
</div>
 );
}

并將其匯入 app.js

import react from "react";
const NavBar = import('./NavBar')



function App() {
    


    return <NavBar />

    


    
}

export default App

然后我將它匯入到主 index.js 并嘗試像這樣使用 ReactDOM.render 進行渲染

import React from 'react';
import ReactDOM from 'react-dom';

const App = import('./components/App')
ReactDOM.render(<App />, document.getElementById("root"))

但沒有得到任何輸出，只有一個空白螢屏。

這是檔案的位置反應渲染不顯示任何東西

這是我的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- bootstrap stylesheet -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>React App</title>
  </head>
  <body>
    
    
    <div id="root"></div>
  
  
  
  
  </body>
  <!-- bootstrap script -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>

這是我的 nav.css 檔案夾，用于設定導航欄組件的樣式



.NavDiv {

    width: 100%;
    height: 30rem;
    background-image: url("https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png");
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.topPortion {

    padding : 0 200px 0 20px;
}


.zomato {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 5rem;
}
h1{
    font-size: 5rem;
}

.zomatoPic2{
    display: block;
width : 50rem;
    margin-right: auto;
margin-left: auto;
}
img{
    display: block;

    justify-content: center;
    width: 20rem;
    margin-right: auto;
margin-left: auto;
color: #fff;
}

我不知道為什么它沒有渲染任何東西。

uj5u.com熱心網友回復：

您正在使用import()，它用于動態匯入并回傳一個承諾。

您需要靜態匯入表單

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById("root"));

反而。同樣代表NavBar在應用程式檔案中的匯入。

其次，在 NavBar 檔案中，您需要將 React 匯入為React，而不是react：

import React from 'react';

uj5u.com熱心網友回復：

當您需要在整個應用程式運行期間安裝組件時，靜態匯入很有用。即使是不同的不同路線也會打開，但靜態組件將始終存在并被安裝。

動態匯入在您希望在導航到不同路線時卸載組件的情況下很有用。

lazy()在 react 中使用和支持動態匯入Suspence。

動態匯入應該是靜態匯入的底部，否則你會得到錯誤

import Snackbar from "./component/shared/Snackbar"
const Dashbaord = lazy(() => import("./screens/admin/Dashboard"))
const Profile = lazy(() => import("./screens/admin/Profile"))

然后你可以使用 Suspense 來掛載帶有后備加載的動態組件。

export default function App() {
    return (
        <Suspence fallback={<p>Loading Screens...</p>}>
            {/* suppose you are working with react-router-dom v6 */}
            <Routes>
                <Route path="/admin" element={<AdminLayout />}>
                    <Route path="dashboard" element={<Dashbaord />} />
                    <Route path="profile" element={<Profile />} />
                </Route>
            </Routes>
        </Suspence >
    )
}

回退有助于在組件加載和掛載時顯示一些占位符。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/428351.html

標籤：反应 npm

上一篇：嘗試從package.json安裝軟體包時出現npm錯誤

下一篇：尋找Next.js節點服務器崩潰的可能原因：“npmERR！codeELIFECYCLEerrno3221225477”