javascript - 为什么说uncaught Reference error : counter is not defined?

Question

不幸的是，我正在练习如何创建具有 reactJS 状态的组件，我不知道哪里出了问题。我已经从前面的示例中反射(reflect)了这一点，除了 reandomNumber 函数之外几乎没有区别，每次单击按钮时我都会在该函数中生成一个新数字。如果有人可以就我做错了什么给我反馈，我将不胜感激。此外，我的 UI 窗口中没有显示任何内容。

var Count = React.createClass({
    render: function() {
        var counterStyle = {
            fontSize: 20,
            fontFamily: "times",
            padding: 50,
            color: "blue"
        };

        return(
            <p style="counterStyle">{this.props.display}</p>
        );
    }
});


var ButtonButton = React.createClass({
    render: function() {
        var buttonStyle = {
            fontSize: "1em",
            width: 60,
            height: 40,
            fontFamily: "times",
            color: "teal",
            fontWeight: "bold",
            lineHeight: "3px"
        };

        return(
            <button style={buttonStyle} onClick={this.props.eventHandle}>Random No.</button>
       );
    }
});

var ButtonSquare = React.createClass({
    getInitialState: function() {
        return(
            counter: 0
        );
    },

    randomNumber: function() {
        this.setState({
            counter: Math.floor(Math.random())
        });
    },


    render: function() {
        var linkStyle = {
            width: 900,
            height: 900,
            backgroundColor: "blue",
            textAlign: "center"
        };


        return (
            <div style={linkStyle}>
                <Count display={this.state.counter}/>
                <ButtonButton eventHandle={this.randomNumber}/>
            </div>
        );
    }
});

Answer 1

您在这里使用了错误的标点符号，并且不小心为 0 而不是具有属性的对象制作了标记语句:

getInitialState: function() {
    return(
        counter: 0
    );
},

应该是

getInitialState: function() {
    return {
        counter: 0
    };
},