为什么我的页面空白?

时间:2017-01-25 13:46:35

标签: javascript html css reactjs

在我的IDE&上点击save后在我的浏览器上点击refresh来测试prompt()文件中的index.js功能,我的整个页面都空白,导致我看不到任何内容,只是一个白色的屏幕。我可以发誓我的功能在语法上是正确的。除了包含prompt()函数外,其他所有工作都很完美。

这是我的index.html文件:

<!DOCTYPE html>
<html>

  <head>
     <title>name name</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="body.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>
    <div id="body"></div>

    <script type="text/babel" src="index.js"></script>
    <script type="text/babel" src="body.js"></script>
  </body>

</html>

这是我的index.js文件:

 var TitleBar = React.createClass({
  prompt: function() {
    alert("This works!");
  }

  render: function() {
    return(
     <div className="jumbotron">
      <div className="container">
      <kbd className="fullName"name name/kbd>
        <button onClick={this.prompt} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button type="button" className="btn btn-primary about">About</button>
        <button type="button" className="btn btn-primary contact">Contact</button>
      </div>
      </div>
    );
  }
});

ReactDOM.render(<TitleBar/>, document.getElementById('firstBar'));

这是我得到的error

    Uncaught SyntaxError: http://127.0.0.1:8080/index.js: Unexpected token (6:2)
    at Parser.pp.raise (browser.js:2027)
    at Parser.pp.unexpected (browser.js:2596)
    at Parser.pp.expect (browser.js:2590)
    at Parser.pp.parseObj (browser.js:1447)
    at Parser.pp.parseExprAtom (browser.js:1250)
    at Parser.parseExprAtom (browser.js:26392)
    at Parser.pp.parseExprSubscripts (browser.js:1097)
    at Parser.pp.parseMaybeUnary (browser.js:1079)
    at Parser.pp.parseExprOps (browser.js:1035)
    at Parser.pp.parseMaybeConditional (browser.js:1018)
browser.js:9170 Uncaught SyntaxError: http://127.0.0.1:8080/index.js: Unexpected token (6:2)
    at Parser.pp.raise (browser.js:2027)
    at Parser.pp.unexpected (browser.js:2596)
    at Parser.pp.expect (browser.js:2590)
    at Parser.pp.parseObj (browser.js:1447)
    at Parser.pp.parseExprAtom (browser.js:1250)
    at Parser.parseExprAtom (browser.js:26392)
    at Parser.pp.parseExprSubscripts (browser.js:1097)
    at Parser.pp.parseMaybeUnary (browser.js:1079)
    at Parser.pp.parseExprOps (browser.js:1035)
    at Parser.pp.parseMaybeConditional (browser.js:1018)

1 个答案:

答案 0 :(得分:2)

,属性

之后添加prompt
var TitleBar = React.createClass({
  prompt: function() {
    alert("This works!");
  },

  render: function() {
    ...
  }
})