用this.props引用属性
用法:
1》.键值对式:
<Hello name=? /> ?可以是{。。。}或字符串“ ”,数组{[...]},或变量{val}
2》. 展开对象式:
var props = {
one:"123",
two:333
}
<Hello{...props} />
3》. 调用setProps式 ; 很少用到
var i =React.render(<Hello></Hello>,document.body);
i.setProps({name:"123"})
实例:
<!DOCTYPE html> <html> <head lang="en"> <Meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> var style = { color : "red",border: "1px #000 solid" }; var HelloWorld = React.createClass({ render: function () { //在展开式形式下载return中添加 Hello,{this.props.name1 + this.props.name2} //在键值形式下载return中添加: Hello,{this.props.name1 ? this.props.name:"World"} return <p ref="childp"> Hello,{this.props.name1 + this.props.name2} </p> },}); var HelloUnivers = React.createClass({ getInitialState: function(){ //用展开式方式 return { name1:'Tim',name2:'123' }; },handleChange:function(event){ this.setState({name: event.target.value}); },render:function(){ //<!--1. 用键值对方式赋值,name属性名,{状态的内容}--> //在return中写入<!--<HelloWorld name={this.state.name}></HelloWorld>--> return <div> <HelloWorld {...this.state}></HelloWorld> <br/> <input type="text" onChange={this.handleChange}/> </div> },}) React.render(<div style={style}> <HelloUnivers></HelloUnivers> </div>,document.body); </script> </body> </html>
2 . 状态的含义和用法
state : 事物所处的状况,由事物处理,不断变化
状态的用法:
- getInitialState: 初始化每个实例特有的状态
- setState: 更新组件的状态
setState触发的行为:
setState ----》 diff算法-----》变化?更新DOM
handleChange:function(event){ this.setState({name: event.target.value}); },
4. 属性和状态对比:
相似点:
- 都是纯JS对象,
- 都会触发render的更新行为
- 都具有确定性
不同点:
....................................................属性...........状态
从父组件中获取初始值..................y..................n
由父组件修改................................y..................n
在组件内部设置默认值..................y..................y
在组件内修改................................n..................y
设置子组件的初始值.....................y..................n
修改子组件的值............................y...................n
区分方法:
组件在运行时需要修改的数据就是状态。
实例
1》项目分析
文章评论框:
step1 : 分析构成项目的组件,
包含内容(子) :(状态)
step2: 分析组将的关系及数据传递
step3: 编写代码:
2》编写第一版代码
<!DOCTYPE html> <html> <head lang="en"> <Meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <script type="text/jsx"> //内容组件(子组件) 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" + "\n" + this.state.inputText); },render: function () { return <div> <textarea onChange={this.handleChange} placeholder="please enter something...."> </textarea> <button onClick={this.handleSubmit}>submit</button> </div>; },}); //评论框组件(父组件) var Comment = React.createClass({ //动态提取option getInitialState: function () { return { names: ["Tim","John","Hank"],selectName: '',// 将监听到的修改内容传递给Content handleSelect: 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.handleSelect}> {options} </select> <Content selectName={this.state.selectName}></Content> </div>; },}) React.render(<Comment></Comment>,document.body); </script> </body> </html>
3》修复bug
视屏来源: www.jikexueyuan.com