反应渲染不显示任何东西

Question

我在 react 中创建了这个导航栏组件

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/popper.js@1.16.0/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;
}

我不知道为什么它不渲染任何东西。

Answer 1

您正在使用 import()，它用于动态导入和 returns 承诺。

您需要静态导入表单

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

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

相反。同样代表在app文件中导入NavBar。

其次，在 NavBar 文件中，您需要将 React 导入为 React，而不是 react:

import React from 'react';

Answer 2

当您需要在整个应用程序运行期间安装组件时，静态导入很有用。即使不同的路由也会打开，但静态组件将始终存在并挂载。

当您希望在导航到不同路线时卸载组件时，动态导入很有用。

使用 lazy() 和 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 >
    )
}

Fallback 有助于在您的组件加载和挂载时显示一些占位符。

反应渲染不显示任何东西

react render don't show anything

npm

reactjs