Браузер говорит, что «reactComponent не определен» в консоли

Question

Я следую за учебником, но я застрял. Я пытаюсь изменить состояние элемента в консоли. но когда я напечатаю это

reactComponent.setState({ 
    isVisible:false 
}) 

Я получаю эту ошибку от хрома.

Uncaught ReferenceError: reactComponent is not defined 
    at <anonymous>:2:1 
    at Object.InjectedScript._evaluateOn (<anonymous>:895:140) 
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34) 
    at Object.InjectedScript.evaluate (<anonymous>:694:21) 

Вот мой Html и JSX

<div id="app"></div> 

    <script src="js/react-0.11.1.js"></script> 
    <script src="js/JSXTransformer-0.11.1.js"></script> 
    <script type="text/jsx"> 
     /**@jsx React.DOM*/ 

     //Main Element with JSX 
     var MessageBoxJSX = React.createClass({ 
      getInitialState: function(){ 
       return { 
        isVisible: true, 
        titleMessage: 'Hello, World' 
       } 
      }, 

      render: function() { 

       var inlineStyles = { 
        display: this.state.isVisible ? 'block' : 'none' 

       }; 

       return (
        <div className = "container" style={inlineStyles}> 
         <h1>{this.state.titleMessage}</h1> 
        </div> 
       ) 
      } 
     }) 

     //Render JSX component 
     React.renderComponent(
      <MessageBoxJSX/>, 
      document.getElementById('app') 
     ) 
    </script> 

Я работаю с более старой версией реагировать, но это то, что учебник использует так я после него, чтобы понять реакцию.

Мой вопрос в том, как заставить браузер менять состояние, не выбрасывая эту ошибку?

Answer 1

Вам не нужно передать имя компонента, как вы делаете в reactComponent.setState({ isVisible:false })

Вместо этого вы передаете ссылку на этот компонент с помощью this:

this.setState({ isVisible: false });