javascript - 浏览器在控制台中显示 'reactComponent is not defined'

Question

我正在学习 React 教程，但我被卡住了。我正在尝试更改控制台中元素的状态。但是当我输入这个时

reactComponent.setState({
   isVisible:false
})

我从 Chrome 中收到此错误。

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>

我正在使用旧版本的 React，但这就是教程使用的内容，因此我将按照它来理解 React。

我的问题是如何让浏览器更改状态而不抛出该错误？

Answer 1

您不需要传递组件的名称，就像您在中所做的那样reactComponent.setState({
可见:假
})

相反，您可以使用 this 传递对该组件的引用:

this.setState({
可见:假
});