react2
1 属性
props==properties
一个事物的性质与关系,与生俱来,无法改变
2.
React中,组件的属性是由父组件传递过来的,出生时就带有的一些特性
3属性的用法(组件可以根据传入的属性来构建不同的子组件)
用法1键值对方法 在调用组件的时候,传入一个键值对,=左边为属性名,=右边为属性值,属性值
可以是一个字符串'Tim',或者一个js表达式{},或者在外部定义一个变量,组件内部引用。
{ }本意为执行js表达式,可以是数字{123},也可以是字符串{'Tim'},或者数组{[1,2,3]}。
<HelloWorld name=''/>
用法2 展开法
var props={ //使用变量定义两个属性
one:'123',
two:321
}
<HelloWorld {...props}/> //三个点表示React调用的时候就自动调用其中的两个属性的值
实例1 (键值对法):
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}/>
<br/>
<input type='text' onChange={this.handleChange}/>
</div>
},
});
React.render(
<div style={style}>< HelloUniverse></ HelloUniverse></div>,
document.body
);
实例2 展开法
var HelloWorld=React.creactClass({ //+' '+这里用空格来分隔字符串
render:function(){
return <p>Hello,{this.props.name1+' '+this.props.name2}</p>
},
});
var HelloUniverse=React.creactClass({
getInitialState:function(){
return {
name1:'Tim',
name2:'John',
};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<HelloWorld {...this.state}></HelloWorld>
<br/>
<input type='text' onChange={this.handleChange} />
</div>
},
});