Question

每当用户点击它时，我希望页面滚动到scrolling文件中的index.js类名称。现在，在我点击cmd + s然后cmd + r后，我的屏幕显示为空白，没有任何内容。

这是我的index.html文件：

<!DOCTYPE html>
<html>

  <head>
     <title>My practice web app</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">
     <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>

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

  </body>

</html>

这是我的index.js文件：

var Website = React.createClass({
  scrolling: function() {
    $("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".scrollTo").offset().top},
        'slow');
});
  },

  render: function() {
    return(

      <div className="container">
      <kbd className="fullName">My practice web app</kbd>
        <button onClick={this.scrolling} 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 className="scrollTo">
        <img src={"./pictures/myPic3.JPG"} className="myPic"></img>
        <p>Portfolio</p>
        </div>
      </div>

    );
  }


});

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

以下是我遇到的错误：

Uncaught SyntaxError: http://192.168.1.8:8080/index.js: Unexpected token (10: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)

Answer 1

正如@AluanHaddad所指出的，你有语法错误：传递给React.createClass的对象必须包含逗号分隔值（成为有效的JavaScript对象）：

React.createClass({
  key1: function() { /* ... */ },
  key2: function() { /* ... */ },
  key1: function() { /* ... */ },
});

但是，尽管如此，您还可以点击按钮点击反应，然后，当用户点击它时，您将使用jQuery绑定另一个事件。

让React处理事件：

var Website = React.createClass({

  scrolling: function() {
    $('html,body').animate(
      {
        scrollTop: $(".scrollTo").offset().top
      },
      'slow'
    );
  },

  render: function() {
    return(

      <div className="container">
        <kbd className="fullName">My practice web app</kbd>
        <button onClick={this.scrolling} 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 className="scrollTo">
          <img src={"./pictures/myPic3.JPG"} className="myPic"></img>
          <p>Portfolio</p>
        </div>
      </div>

      );
  }


});

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

工作小提琴：https://jsfiddle.net/mrlew/axvyf97L/（只需点击投资组合按钮）。

一些建议：

1）您在浏览器中加载了babel：它仅用于测试目的（不知道它是否属于您的情况;如果是，请忽略）。请考虑使用像webpack这样的捆绑器首先预先传输您的js文件。来自docs：

在浏览器中进行编译的用例相当有限，所以如果你是这样的话在生产站点上工作，您应该预编译脚本服务器端。有关详细信息，请参阅setup build systems。

2）你将jQuery与React混合：所有DOM操作和事件绑定都应该用React完成。

为什么我的div滚动不工作？

1 个答案: