### 属性的含义和用法
props=properties
属性:一个事物的性质与关系
属性往往是与生俱来的、无法自己改变的.
属性的用法：
**第一种方法：键值对**
1、传入一个字符串:”Hi”(字符串)/{“Hi”};
2、传入一个数组{[arry]};
3、传入一个变量{variable}
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
}
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ""};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return(
<div>
<HelloWorld name = {this.state.name}></HelloWorld>
<input type = "text" onChange = {this.handleChange}/>
</div>
)
}
});
ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example"));
</script>
~~~
运行结果如下，使用的是键值对的方式
**第二种方法：可以理解为展开**
var props = {one:”hello”, two:”message”}
React提供展开语法…,使用…加对象,react就会把对象中的属性和值，当成是属性的赋值：
~~~
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name + " " + this.props.age}</p>;
}
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: "Yvette", age: "25"};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return(
<div>
<HelloWorld {...this.state}></HelloWorld>
<input type = "text" onChange = {this.handleChange}/>
</div>
)
}
});
ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example"));
</script>
~~~
运行结果如下，使用{…this.state}展开
**第三种方法：调用react提供的setProps函数**
setProps接收的参数是一个对象，但是react不推荐改变组件的属性,可以通过父组件向子组件传入的方式。
~~~
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name}</p>
}
});
var instance = ReactDOM.render(<HelloWorld></HelloWorld>, document.querySelector("#example"));
instance.setProps({name: "William"});
</script>
~~~
使用setProps修改属性值，此种方式不推荐，如果需要改变属性值，可以参考第一个例子，利用父组件去修改。
### 状态的含义和用法
state
状态：事物所处的状况。
状态是由事物自行处理、不断变化的。
状态是事物的私有属性。
状态的用法
getInitialState:初始化每个实例特有的状态
setState:更新组件状态
使用setState——启用diff算法——有变化，更新DOM
### 属性和状态的对比
属性和状态的相似点
1、都是纯JS对象
2、都会触发render更新
3、都具有确定性
状态只和组件本身相关，组件不能修改属性
组件在运行时需要修改的数据就是状态。
### 属性和状态的实例
编写一个简单的文章评论框
第一步：分析构成项目的组件
第二步：分析徐俊的关系和数据传递
第三步：编写代码
第一步：分析构成项目的组件
评论框
内容
第二步：分析徐俊的关系和数据传递
评论框是内容的父组件
父组件需要传递评论对象子组件，评论对象是内容组件的属性，评论内容是内容组件的状态。
1、select，option是写死的
2、option的内容应该是动态的，将option的内容作为状态提取出来
利用属性和状态实现一个评论框:
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title>评论框</title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<!--将option提取出来作为父组件的状态-->
<!--将评论对象(selectName)传递给子组件-->
<!--修改子组件,构建回复内容-->
<!--监听内容的变化，并将变化记录在状态中-->
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var style = {
width:300 + 'px',
height:150 + 'px',
marginTop:20+'px',
marginBottom:20+'px',
resize: 'none',
textIndent:10 + 'px'
};
var Content = React.createClass({
getInitialState: function (){
return{
inputText: ""
};
},
handleChange: function(event){
this.setState({inputText:event.target.value})
},
handleSubmit: function () {
console.log("reply to: " + this.props.selectName + "\n" + this.state.inputText);
},
render: function () {
return (<div>
<textarea style = {style} onChange = {this.handleChange} placeholder = "please enter something..." ></textarea>
<br/>
<button onClick = {this.handleSubmit}>submit</button>
</div>);
}
});
var Comment = React.createClass({
getInitialState: function () {
return{
names: ["William", "Yvette", "Katharine"],
selectName: ""
};
},
handleChange: function (event) {
this.setState({selectName:event.target.value})
},
render: function () {
var options = [];
for(var option in this.state.names){
options.push(<option value = {this.state.names[option]}> {this.state.names[option]} </option>)
};
return (
<div>
<select onChange = {this.handleChange}>
{options}
</select>
<Content selectName = {this.state.selectName}></Content>
</div>);
}
});
ReactDOM.render(<Comment></Comment>, document.querySelector("#example"));
</script>
~~~
需要注意的是，React中,style不能直接写300px,需要使用拼接,另外margin-top等也需要使用驼峰命名法,写成marginTop
运行结果如下:
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解