react2

Posted 2020-08-22 2350305682

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>
},
});