react组件状态的一点说明

来源：互联网发布：诺基亚s60软件下载编辑：程序博客网时间：2024/05/23 11:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState:function(){
return {liked11:true};
},
handleClick:function(event){
this.setState({liked:!this.state.liked});
},
render:function(){
var text = this.state.liked ? "喜欢":"不喜欢";
return(
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换。
</p>
);
}
});

//使用组件
ReactDOM.render(<LikeButton/>,document.getElementById('example'));
</script>
</body>

</html>

我试验发现，如果getInitialState里如果没有定义那个变量，后面是不会报错的，而时默认为false使用，如上例中的liked字段

阅读全文

0 0