Невозможно визуализировать реагирующий компонент

Я новичок в реактиве и пытаюсь создать ниже компонент 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

Можете ли вы описать проблему немного больше.Какая ошибка вы испытываете? –

Действительно ли 'script.js' в'

Я подозреваю, что приведенный ниже пример немного устарел? В коде есть несколько проблем. Прежде всего, вы должны теперь использовать

import ReactDOM from "react-dom"; 

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

Тогда для того, чтобы загрузить JSX код в вашем браузере, вам нужно запустить его через Бабеля. И даже если вы сделаете это, то это не может работать:

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, потому что это, по-видимому, способ пойти на React:

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

Смежные вопросы