爲什麼我的div卷軸不工作？

我想要的頁面滾動到scrolling類的名字在我index.js文件每當用戶點擊它。現在，我的屏幕是空白的什麼也沒有它我打cmd + s然後cmd + r後。爲什麼我的div卷軸不工作？

這是我的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/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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)

來源

2017-01-26 chompy

你錯過了'，'在你的對象字面 –

@AluanHaddad我固定的，這是行不通的。頁面仍然完全空白。 – chompy

正如指出的@AluanHaddad，你有一個語法錯誤：對象傳遞給React.createClass必須包含逗號分隔值（是一個有效的JavaScript對象）：

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

但是，儘管如此，要綁定按鈕，點擊與反應，以及，然後，當用戶點擊它，要綁定另一個事件使用jQuery。

就讓陣營處理該事件：

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）你在瀏覽器中加載巴貝爾：這只是用於測試目的（不知道這是否是您的情況，如果是這樣，請無視）。請考慮使用像webpack這樣的捆綁軟件先預先傳輸您的js文件。從docs：

在瀏覽器編譯具有相當有限的使用情況，所以如果你是在生產現場，你應該預先編譯腳本服務器端工作。有關更多信息，請參閱安裝構建系統

2）您將jQuery與React混合：所有DOM操作和事件綁定都應該使用React完成。

來源

2017-01-26 03:29:19 mrlew

它的工作原理！非常感謝！ – chompy

@mrlew爲什麼會導致來自Babel的解析錯誤？ –

@chompy不用客氣。我編輯了一些建議，如果你允許我。 – mrlew

爲什麼我的div卷軸不工作？

回答

相關問題