無法呈現反應組件

我是React的新手，嘗試創建下面的React組件，但沒有呈現。無法呈現反應組件

script.jsx

var Button = React.createClass({ 
     getInitialState:() => { 
     return { 
      counter: 0 
     }; 
     }, 
     handleClick:() => { 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
     }, 
     render:() => { 
     return (<button onClick={this.handleClick}> this.state.counter </button>); 
     } 
     }); 

    React.render(<Button />, document.getElementById('root'));

的index.html

<!DOCTYPE html> 
<html> 
    <body> 
    <h1>React App</h1> 
    <div id="root"></div> 

    <script src="libs/react-15.0.2.js"></script> 
    <script src="script.jsx"></script> 
    </body> 
</html>

任何人都可以請讓我知道怎麼回事錯在這裏。

來源

2016-05-16 Dinu

你可以描述更多的問題。你遇到什麼錯誤？ –

我懷疑你所遵循的例子有點過時了嗎？代碼中有幾個問題。首先，您現在應該使用

import ReactDOM from "react-dom"; 

ReactDOM.render(<Button />, document.getElementById('root'));

然後，爲了在您的瀏覽器中加載JSX代碼，您需要通過Babel運行它。即使你做到這一點，這可能無法正常工作：

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

（從https://facebook.github.io/react/docs/getting-started.html）

所以，你可能使用類似的WebPack或browserify好得多。

在渲染功能，您應該將參照大括號的計數器，因爲它是JavaScript的：

{ this.state.counter }

和最後的一點是，如果你開始學習的反應，我建議你開始使用普通的JavaScript類，因爲這似乎是反應的方式：

import React, {Component} from "react"; 

export default class extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {counter: 0}; 
    } 

    render() { 
    return (
     <button 
      onClick={() => this.setState({counter: this.state.counter + 1}) }> 
      {this.state.counter} 
      </button> 
    ); 
    } 
}

來源

2016-05-16 11:36:32 Nicole

感謝您的指點。 – Dinu

相關問題