浏览器显示'reactComponent未定义'在控制台

Browser says 'reactComponent is not defined' in console

本文关键字：控制台 未定义 reactComponent 浏览器 显示      更新时间：2023-09-26

我正在跟随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。

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

您不需要传递组件的名称，就像在reactComponent.setState({ isVisible:false })

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

this.setState({ isVisible: false });

相关文章：