Question

我正在关注反应教程，但我被困住了。我试图改变控制台中元素的状态。但是当我输入这个

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>

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

我的问题是如何在不抛出错误的情况下让浏览器更改状态？

Answer 1

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

而是使用this传递对该组件的引用：

this.setState({ isVisible: false });

浏览器表示＆＃39; reactComponent未定义＆＃39;在控制台

1 个答案: