为什么说uncaught引用错误：计数器没有定义？

Question

我正在练习如何创建具有reactJS状态的组件，不幸的是我无法弄清楚什么是错的。我从前面的例子中反映了这一点，除了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 
    }; 
},