我有一个用纯 HTML/CSS 编码的网站。一切都很好,但我在 React 中需要它(我正在学习 React)。
所以,我将 HTML 代码粘贴到 index.js 中,导入了 CSS 文件,但网站似乎只是一片空白。 它似乎正在渲染我给 body 的背景颜色#f1f7f9,但没有别的。
import ReactDOM from "react-dom";
import { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "./translate.css";
class Translate extends React.Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-sm navbar-light bg-dark align-items-center">
/*Brand Name*/
<a href="Tarnslate.html" className="navbar-brand">
Translate
</a>
<button
className="navbar-toggler"
data-toggle="collapse"
data-target="#HomepageMenu"
>
<span className="navbar-toggler-icon"></span>
</button>
/*Toggle Horizontal Alignment*/
<div className="collapse navbar-collapse " id="HomepageMenu">
/*Navigation Items*/
<div className="navbar-nav">
<a className="nav-link" href="#">
ABOUT US
</a>
<a className="nav-link" href="#">
PRICING
</a>
<a className="nav-link" href="#">
WORK WITH US
</a>
<a className="nav-link" id="sign-in" href="#">
SIGN IN
</a>
</div>
</div>
</nav>
<div className="main-content">
<h6 id="h6">Tip: Click the highlighted words</h6>
<div id="line"></div>
<p id="main-text">
Please translate <span id="first">my document</span> from{" "}
<span id="second">this language</span> to{" "}
<span id="third">these language(s)</span>, <br />
and send the translated version to
<span id="last">my email</span>.
</p>
<div id="pop-up"></div>
</div>
<div className="bottom">
<div id="flex-container">
<p id="bottom-brand-name">Translate's Official Website</p>
/*Social Media Icons*/
<img
src="./Images/Facebook.svg"
className="social-media-icons"
id="facebook"
/>
<img
src="./Images/Twitter.svg"
className="social-media-icons"
id="twitter"
/>
<img
src="./Images/Linkedin.svg"
className="social-media-icons"
id="linkedin"
/>
</div>
<p id="copyright">©All Rights Reserved 2019</p>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</div>
);
}
}
export default Translate;
这是 index.js 代码。
最佳答案
如果您将其直接粘贴到默认创建的 index.js 中,则错误。您需要为此组件创建一个不同的文件,您可以将其路由到您的 App.js 文件中。还要确保行
import { Component } from "react";
被编辑为 import React, { Component } from "react";
因为您需要导入 React 本身来呈现页面。
关于javascript - 除了背景颜色之外什么都没有显示 - React(只显示空白网站),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58657984/