【发布时间】：2019-09-21 13:24:20
【问题描述】：
我的代码在 codepen 上工作，但不能在外面使用 Visual Studio Code 创建我的文件（它们是：Quote.html、Quote.css、Quote.js 都在同一个文件夹中）。
当我在浏览器中打开我的html 文件时，我得到一个绿屏，因此css 文件链接正确，但js 文件链接不正确。
根据我在 Stackoverflow 上阅读的内容，我正确地将 js 文件放入脚本中，但我所做的事情是错误的。我
HTML 文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Quote.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="Quote.js" type="text/javascript"></script>
</body>
</html>
//css file code:
body {background-color: green; color: white;}
#quote-box {
margin-top: 80px;
}
Javascript 文件代码：
const quotes = [
{
quote: "Don't cry because it's over, smile because it happened.",
author: "Dr. Seuss"
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: "Mae West"
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde"
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein"
},
{ quote: "So many books, so little time.", author: "Frank Zappa" },
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero"
},
{
quote:
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
author: "J.K. Rowling"
}
];
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"
}
this.newQuote = this.newQuote.bind(this);
this.sendTweet = this.sendTweet.bind(this);
}
newQuote() {
const randNumber = Math.floor(Math.random() * quotes.length);
this.setState({quote: quotes[randNumber].quote, author: quotes[randNumber].author})
}
sendTweet = () => {
const url = "twitter.com";
const text = this.state.quote.concat(" - ").concat(this.state.author);
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render() {
return (
<div id="quote-box" class="container">
<div class="row">
<h1 class="col-md-3"></h1>
<h1 class="text-center col-md-6">Random Quotes:</h1>
<h1 class="col-md-3"></h1>
</div>
<div class="row">
<p class="col-md-3"></p>
<blockquote class="col-md-6">
<p id="text"><i class="fa fa-quote-left"></i> {this.state.quote} <i class="fa fa-quote-right"></i></p>
<cite id="author">-- {this.state.author}</cite>
</blockquote>
<p class="col-md-3"></p>
</div>
<div class="row">
<p class="col-md-3"></p>
<button id="new-quote" class="btn btn-default col-md-1" onClick={this.newQuote}>New Quote</button>
<p class="col-md-3"></p>
<a id="tweet-quote" onClick={this.sendTweet} class="text-right"><button class="btn btn-default col-md-2">Tweet Quote <i class="fa fa-twitter"></i></button></a>
<p class="col-md-3"></p>
</div>
</div>
);
}
};
ReactDOM.render(<Presentational />, document.getElementById("app"));
这是指向应显示内容的 Codepen 链接：https://codepen.io/EOJA/pen/MRNoBq
【问题讨论】：
-
您是否设置了本地环境...？
-
我正在学习编码，从我通过谷歌搜索“本地环境”阅读的内容来看，我的理解是它已设置 - 这意味着我有一些 .html、.css 和 .js 文件我电脑上的文件夹。使用来自互联网的示例，以相同的方式保存到我的计算机，我可以使用浏览器打开 .html 文件来查看网站。但是，对于我的问题中的文件，我无法查看该网站 - 它只是一个绿屏。
-
我对本地环境的理解有误吗？
标签： javascript html css reactjs twitter-bootstrap