沉默错误

Question

我是ReaactJS的新用户，当我在浏览器中检查时，我没有收到我的产品组件。我在控制台中没有看到任何错误。我的index.html和app.js处于同一级别。我正在使用节点服务器来运行该应用程序。

我的index.html是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Disable browser cache -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>Project One</title>
    <link rel="stylesheet" href="vendor/semantic-ui/semantic.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="vendor/babel-core-5.8.25.js"></script>
    <script src="vendor/react.js"></script>
    <script src="vendor/react-dom.js"></script>
  </head>

  <body>
    <div class="main ui text container">
      <h1 class="ui dividing centered header">Popular Products</h1>
      <div id="content"></div>
    </div>
    <script src="./data.js"></script>
    <script type="text/babel" src="./app.js"></script>
  </body>
</html>

我的app.js

const ProductList = React.createClass({
  render: function(){
    return (
      <div className='ui items'>
        <Product />
        Hello, friend! I am a basic React component.
      </div>
    );
  },
});

ReactDOM.render(<ProductList />, document.getElementById('content'));

const Product = React.createClass({
  render: function(){
    return (
      <div className='item'>
        <div className='image'>
          <img src='images/products/image-aqua.png' />
        </div>
       <div className='middle aligned content'>
        <div className='descriprtion'>
          <a>Fort Knight</a>
          <p>Authentic renaissance actors, delivered in just two weeks.</p>
        </div>
        <div className='extra'>
          <span>Submitted by:</span>
          <img className='ui avatar image' src='images/avatars/daniel.jpg' />
        </div>
      </div>
      </div>
    );
  },
});

Answer 1

您没有提供足够的源代码，但这只会出于两个原因：

沉默错误

在您的def anti_vowel_py3(text): return text.translate({ord(i): None for i in "aeiouAEIOU"}) print(anti_vowel_py3("hello world"))或app.js或其他任何地方，您正在为异常做准备。一个例子：

data.js

正如您所看到的，catch子句中的错误正在被隐藏。仔细检查您的代码并确保您从未这样做过。您只需在catch子句中将错误打印到控制台：

try {
  // code that is causing an exception
} catch (err) {

}

JSX转换器的问题

在您的代码中的某个地方，您的JSX可能存在阻止Babel完成变换器的问题。您可以将ESLint与此plugin一起使用，以确保您的JSX有效。

或者，您也可以使用Babel repl。我尝试了你的产品组件，它似乎发生了successfully。您需要在项目的其他部分中查看任何其他JSX代码并确保其有效。

Answer 2

我清除了缓存，现在正在运行。谢谢你的回答。

浏览器中没有输出，控制台中没有任何内容

2 个答案:

沉默错误

JSX转换器的问题