props:组建初始要渲染的数据,他是不可以改变的

state:组建状态发生改变,调用render重新渲染数据

我们来写一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
//定义一个组建,名字第一个必须是大写
var Firs = React.createClass({
/*组建的状态*/
getInitialState:function(){
return{
mes:this.props.value
}
},
render:function(){
return(
//必须要有一个大标签包围着才可以
<div>
<h1>Hello {this.props.user}</h1>
<input type="text" name="" value={this.state.mes} onChange={this.changeHandle} />
<input type="button" value={this.props.sendname} />
<p>{this.state.mes}</p>
</div>
);
},
changeHandle:function(ev){
//console.log(ev.target.value);
this.setState({mes:ev.target.value});
}
}); var obj = {
user: '夺命雷公狗',
sendname :'留言',
values : '请输入留言的信息'
} ReactDOM.render(<Firs {...obj} />, /*这里其实也可以使用双标签的如:<Fir></Fir> */
document.getElementById('demo'),
function(){
alert('页面渲染完成');
});
</script>
</body>
</html>

效果如下所示:

夺命雷公狗-----React---7--组建的状态props和state的更多相关文章

  1. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  4. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 夺命雷公狗-----React---3--标签的规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 夺命雷公狗-----React---2--组建

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

随机推荐

  1. Titanium vs PhoneGap

    http://mobile.51cto.com/Titanium-318049.htm http://www.ibm.com/developerworks/cn/opensource/os-titan ...

  2. ANDROID_MARS学习笔记_S01原始版_016_Service

    一.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

  3. Python datetime time 常用操作

    测试版本: Python 2.7 获取当前时间的两种方法 import datetime,time now = time.strftime("%Y-%m-%d %H:%M:%S") ...

  4. 2.x ESL第二章习题 2.8

    题目 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...

  5. Java解决TopK问题(使用集合和直接实现)

    在处理大量数据的时候,有时候往往需要找出Top前几的数据,这时候如果直接对数据进行排序,在处理海量数据的时候往往就是不可行的了,而且在排序最好的时间复杂度为nlogn,当n远大于需要获取到的数据的时候 ...

  6. Egret飞行模拟-开发记录02

    1.Egret异步加载资源制作loading界面 使用EUI,EXML组件制作loading界面时,需要皮肤主题资源加载控制.即default.thm.json配置文件. 下一篇专门记录这部分. 2. ...

  7. Windows 机器上面同时安装mysql5.6 和 mysql5.7 的方法

    1. 自己遇到的两个坑: . mysql 登录的时候 需要使用-P 来指定端口号 不然默认走 呢 . mysql 5.6 和 mysql 5.7 更改用户密码的命令不一样.. 我这边浪费了很长时间: ...

  8. 1.6Eigen中系数运算Reductions, visitors and broadcasting

    Eigen::Matrix2d mat; mat<<,, ,; cout<<"矩阵所有系数之和:"<<mat.sum();//1+2+3+4=1 ...

  9. go标准库的学习-encoding/xml

    参考:https://studygolang.com/pkgdoc 导入方式: import "encoding/xml" 实现的简单的理解XML命名空间的XML 1.0编译器 f ...

  10. rabbitMQ 的基本知识

    参考:  https://www.cnblogs.com/dwlsxj/p/RabbitMQ.html