如何修改App.js以显示HTML模板
如何修改App.js以显示HTML模板
提问于 2020-03-09 14:57:19
我刚刚开始使用React，并通过在internet上集成一个演示html管理模板启动了一个新项目。
我试图做类似的工作，但最终显示了默认的react页面。我观察到的一件事是，页面显示登录页面，加载输入按钮，但是一旦加载完整页面，默认的React页面就会显示出来。然而，我觉得我在App.js文件中做了一些错误的事情。
下面是我的index.html代码( public/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> 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> 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> 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编写的src/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编写的src/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();我应该修改什么使它工作？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-03-10 05:13:13
在您的index.js文件中的这一行上呈现了app组件：
ReactDOM.render(<App />, document.getElementById('root'));
试着注释或删除上面的一行，看看是否有帮助。更好的方法是将App()组件修改为您想要的内容，而不是直接修改公用文件夹上的html文件。
Stack Overflow用户
发布于 2020-03-10 05:19:48
您正在用id App呈现节点中的root。在加载页面时，您可以看到登录表单，但是一旦加载了javascript，root中的内容就会被react替换。我不知道你想用这个来达到什么目的。
Stack Overflow用户
发布于 2020-03-10 05:27:44
我不能完全确定我是否正确地理解了您的问题，但据我所见，您根本没有导入public/index.html文件。
您的index.js文件导入App.js，结果就是App.js文件的内容。
如果这确实是您要问的问题，您可以要求将HTML文件放入变量中，对其进行字符串化(例如使用这个字符串包)，并使用div中的dangerouslySetInnerHTML支柱来显示突出的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60603166
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号