javascript - 如何修改 App.js 以显示 HTML 模板-6ren

javascript - 如何修改 App.js 以显示 HTML 模板

转载作者：行者123 更新时间：2023-12-02 21:31:56

我刚刚开始使用 React，并通过在互联网上集成演示 html 管理模板来启动一个新项目。

我尝试做类似的事情，但最终显示了默认的 react 页面。我观察到的一件事是，该页面在加载时显示带有输入按钮的登录页面，但一旦加载完整页面，就会显示默认的 React 页面。然而，我觉得我在 App.js 文件中做错了什么。

下面是我在public/index.html中的index.html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <meta name="description" content="">
    <meta name="keywords" content="some">
    <meta name="author" content="example">
    <link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/assets/images/favicon.png">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/toastr.css">
    <link rel="stylesheet" type="text/css" href="/bypasser/assets/vendors/css/forms/icheck/icheck.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/sweetalert.css">
    <style>
      .swal-button { border-radius: 1.5rem !important; }
    </style>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/forms/toggle/switchery.min.css" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/tables/datatable/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/unslider.css" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/weather-icons/climacons.min.css" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/meteocons/style.min.css" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/charts/morris.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" />
    <!-- END VENDOR CSS-->
    <!-- BEGIN STACK CSS-->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/app.min.css">
    <!-- END STACK CSS-->
    <!-- BEGIN Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/menu/menu-types/vertical-menu-modern.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/simple-line-icons/style.min.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/users.min.css">
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/timeline.min.css">
    <!-- END Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/plugins/forms/switch.min.css">
    <!-- BEGIN Custom CSS-->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/style.css">
    <!-- END Custom CSS-->
    <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>MS - Finance | Login Page</title>
  </head>
  <body class="blank-page">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      <div class="app-content content">
        <div class="content-wrapper">
          <div class="content-header row">
          </div>
          <div class="content-body">
              <section class="flexbox-container">
                  <div class="col-12 d-flex align-items-center justify-content-center">
                      <div class="col-md-4 col-10 box-shadow-2 p-0">
                          <div id="login-section" class="card border-grey border-lighten-3 m-0">
                              <div class="card-header border-0">
                                  <div class="card-title text-center">
                                      <!-- <div class="p-1"><i class="ft-layers"> StackMantle</i> -->
                                          <img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
                                      <!-- </div> -->
                                  </div>
                                  <!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
                              </div>
                              <div class="card-content">
                                  <div class="card-body">
                                      <form class="form-horizontal form-simple">
                                          <fieldset class="form-group position-relative has-icon-left mb-0">
                                              <input required type="text" autofocus class="round form-control" id="login-username" placeholder="Username / Email-ID / Contact Number" required>
                                              <div class="form-control-position">
                                                  <i class="ft-user"></i>
                                              </div>
                                          </fieldset>
                                          <fieldset class="form-group position-relative has-icon-left">
                                              <input required type="password" class="round form-control" id="login-password" placeholder="Login Password" required>
                                              <div class="form-control-position">
                                                  <i class="fa fa-key"></i>
                                              </div>
                                          </fieldset>
                                          <div class="form-group row">
                                              <!-- <div class="col-xs-6 col-sm-6 col-md-6 col-12 text-center text-md-left">
                                                  <fieldset>
                                                      <input type="checkbox" id="remember-me" class="chk-remember">
                                                      <label for="remember-me"> Remember Me</label>
                                                  </fieldset>
                                              </div> -->
                                              <div style="margin-top: -15px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
                                                  <a id="swap-forgot" href="javascript:" class="card-link">Forgot Password?</a>
                                              </div>
                                          </div>
                                          <button type="submit" id="login-button" class="round btn btn-outline-primary btn-block"><i class="ft-unlock"></i> &nbsp;Unlock My Panel</button>
                                      </form>
                                  </div>
                                  <div class="card-footer">
                                    <div class="text-center">
                                        <a href="/" class="btn btn-md btn-outline-secondary round">
                                            <i class="ft-eye"></i> &nbsp;Let's have a look
                                        </a>
                                    </div>
                                </div>
                              </div>
                          </div>
                          <div id="pass-section" class="card border-grey border-lighten-3 m-0">
                              <div class="card-header border-0">
                                  <div class="card-title text-center">
                                      <!-- <div class="p-1"><i class="ft-layers"> </i> -->
                                          <img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
                                      <!-- </div> -->
                                  </div>
                                  <!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
                              </div>
                              <div class="card-content">
                                  <div class="card-body">
                                      <form class="form-horizontal form-simple">
                                          <fieldset class="form-group position-relative has-icon-left">
                                              <input type="email" class="round form-control" id="reset-email" placeholder="Registered Email-ID" required>
                                              <div class="form-control-position">
                                                  <i class="ft-mail"></i>
                                              </div>
                                          </fieldset>
                                          <div style="margin-top: 10px; margin-bottom: 20px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
                                            <a id="swap-login" href="javascript:" class="card-link">I know My Password!</a>
                                        </div>
                                          <button type="submit" id="reset-button" class="round btn btn-outline-primary btn-block"><i class="ft-rotate-ccw"></i> Recover Password</button>
                                      </form>
                                  </div>
                                  <div class="card-footer">
                                    <div class="text-center">
                                        <a href="/" class="btn btn-md btn-outline-secondary round">
                                            <i class="ft-eye"></i> &nbsp;Let's have a Look at Blog
                                        </a>
                                    </div>
                                </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </section>
          </div>
        </div>
      </div>
    </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <!-- BEGIN VENDOR JS-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/vendors.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/extensions/toastr.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/extensions/sweetalert.min.js" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/datatables.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.flash.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/jszip.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/pdfmake.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/vfs_fonts.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.html5.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.print.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="%PUBLIC_URL%/assets/vendors/js/extensions/unslider-min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/timeline/horizontal-timeline.js" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/bootstrap-checkbox.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/switchery.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="%PUBLIC_URL%/assets/js/scripts/forms/switch.min.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS -->
    <!-- BEGIN STACK JS-->
    <script src="%PUBLIC_URL%/assets/js/core/app-menu.min.js" type="text/javascript"></script>
    <script src="%PUBLIC_URL%/assets/js/core/app.min.js" type="text/javascript"></script>
    <!-- END STACK JS-->
    <script src="%PUBLIC_URL%/assets/custom/login.js" type="text/javascript"></script>
  </body>
</html>

下面是我在 src/App.js 中的 App.js 代码

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 return (
  <div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
  </div>
  );
 }

export default App;

下面是我在src/index.js中的index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

我应该修改什么才能使其正常工作？

最佳答案

应用程序组件正在您的 index.js 中的这一行上呈现文件:

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

尝试注释或删除上面的行，看看是否有帮助。更好的是，将 App() 组件修改为您想要的内容，而不是直接修改公共(public)文件夹中的 html 文件。

关于javascript - 如何修改 App.js 以显示 HTML 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60603166/

文章推荐： javascript - 单击按钮时如何在图标之间切换？

文章推荐： javascript - 无法恢复用户信息

文章推荐： javascript - 让 Typescript 从普通 javascript 对象推断类型

文章推荐： Javascript - 无法在模块外部使用 import 语句

node.js - backbone.js + node.js - express.js
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之，我想将我的应用程序实现为单独的层，其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
node.js - Sequelize js/express js/node js 如何更改日期格式
当我看到存储在我的数据库中的日期时。这是正常。日期和时间就是这样。但是当我运行 get 请求来获取数据时。此格式与存储在数据库中的格式不同。为什么会发生这种情况？最佳答案我认为您可以将
history.js - Sammy.js/History.js/Nav.js 之间的比较
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
backbone.js - Mustache.js/Hogan.js 和 Backbone.js
我正在尝试使用backbone.js 实现一些代码和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
node.js - Backbone.js Node.js Express.js 中的用户功能
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序，并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
node.js - Angular.js/D3.js/Node.js 之间有什么区别和相似之处
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
node.js - d3.js、queue.js 和 node.js
我尝试在 NodeJS 中加载数据，然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
node.js - node.js 中 app.js、index.js 和 server.js 的约定？
在 node.js 中，我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时，会创建一个 app.js 文件作为生成应用的主要入口点。通过 n
backbone.js - amplify.js 和backbone.js
最近，我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。我更喜欢客户端。在他的实现过程中，papa先生在客户端有类
backbone.js - Mustache.js、Handlebars.js 和 Underscore.js 有什么区别？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
d3.js - Pixi.js vs Konva.js vs D3.js
我是一个图形新手，需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么，而我没有从 Konva 等基于 Canvas 的库中得到什么？我从 Konva
node.js - Ember.js:将选项传递给node.js
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
node.js - 尝试在 Express.js Node.js Passport.js 中查看所有登录用户
尝试查看 Express Passport 中所有登录用户的所有 session ，并希望能够查看当前登录的用户。最好和最快的方法是什么？我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
node.js - React.js 渲染完成后运行客户端 JS
我有一个 React 应用程序，但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载，运行与 DOM 交互的 js 的最佳方式是什么，例如 $('div').mixItUp() 。对
node.js - 使用 vue.js、node.js 和express.js 上传原始文件
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器客户端 // ... onFilePicked(file) { const url = 'upload/a
node.js - 由于 js 错误过多，Gulp.js 无法编译 angular.js 项目？
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好，所以我一定是在 Gulp 中做错了什么。除脚本外，所有其他任务均有效。我现在厌倦了添加和注释部分。我不断收到与意外
node.js - sails.js(使用 node.js 和 express.js)的标题或应用名称在哪里？
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。最佳答案您可以在 config/ 目录中创建任何文件，例如 config/app.js 包含如下内容: module.expor
node.js - 将 ember.js 与 node.js + express.js 结合使用
经过多年的服务器端 PHP/MySQL 开发，我正在尝试探索用于构建现代 Web 应用程序的新技术。我正在尝试对所有 JavaScript 内容进行排序，如果我理解得很好，一个有效的解决方案可以是服
node.js - Node.js 中 app.js 和 index.js 的区别
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
javascript - AngularJS 种子 : putting JavaScript into separate files (app. js、controllers.js、directives.js、filters.js、services.js)
我正在使用 angular-seed用于构建我的应用程序的模板。最初，我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何修改 App.js 以显示 HTML 模板