Мой код работает на codepen, но не снаружи, используя код Visual Studio для создания моих файлов (которые: 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

-2
eoja 3 Май 2019 в 04:53

3 ответа

Лучший ответ

Глядя на ваш код, каталог вашего проекта должен быть таким, чтобы он работал:

Project_Folder
| index.html
| Quote.css
| Quote.js

Изменить . После некоторого изучения этого вопроса я обнаружил это, чтобы помочь.

<!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">
    <style>
        body {
            background-color: green;
            color: white;
        }
        
        #quote-box {
            margin-top: 80px;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <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 type='text/babel'>
       // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 
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" href="http://twitter.com/intent/tweet" 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"));


    </script>
</body>

</html>
0
Izzy Ahmad 3 Май 2019 в 03:41

@ Иззи Ахмад Я скопировал код js после нажатия на «Просмотреть скомпилированный JS» в codepen и вставил его в мой файл Quote.js, и это сработало! Таким образом, проблема была вавилонской. Спасибо!

-1
eoja 3 Май 2019 в 04:32

Не эксперт по React, но я верю, что вам не хватает Вавилона.

В этом случае я смог получить пример для работы, вставив свой Javascript и включив Babel в качестве другого источника сценария.

<!-- Bottom of index.html -->   
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
... Your JS code
<script>

Ссылка: Почему React требует, чтобы Babel и Webpack работали?


Редактировать:

Вы можете избежать встраивания своего Javascript, ссылаясь на Quote.js следующим образом:

<script type='text/babel' src='Quote.js'></script>

И затем раскручивая локальный сервер и вызывая файл таким образом.

Ссылка: Как настроить локальный сервер тестирования?

0
Po Rith 3 Май 2019 в 03:12