属性一般是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改
属性是描述性质、特点的,组件自己不能随意更改
使组件拥有属性的方式:
- 在装载(mount)组件的时候给组件传入
传入数据的时候,除了字符串类型,其他的都应该包上表达式,但是为了规整,所有的数据传递,最好都包上{}
var Gouzi = React.createClass({
render(){
console.log(this)
return (
<div>
<p>我的名字:{this.props.name}</p>
<p>我的性别:{this.props.sex}</p>
<p>我的年龄:{this.props.age}</p>
<p>我的父亲是:{this.props.father}</p>
</div>
)
}
})
let info = {
sex:'male',
father:'狗爸'
}
ReactDOM.render(<Gouzi {...info} name={"大狗子"} age={26}/>,app)
- 父组件给子组件传入
父组件在嵌套子组件的时候为子组件传入,传入的方式和上面的方式一样
//父组件的render函数
render(){
return (
<div>
<p>父组件:</p>
<hr/>
<Son name={'大狗子'}/>
<Son name={'二狗子'}/>
</div>
)
}
- 子组件自己设置
子组件可以通过getDefaultProps来设置默认的属性
getDefaultProps的值是函数,这个函数会返回一个对象,我们在这里对象里为组件设置默认属性
这种方式设置的属性优先级低,会被外部传入的属性值所覆盖
getDefaultProps:function () {
console.log('getDefaultProps')
return {
name:'狗爸',
sonname:'二狗子'
}
},
//render
<p>我是{this.props.sonname}的父亲-{this.props.name}</p>
根据属性或状态,我们可以在render中的表达式里做一些逻辑判断,可以使用||、三元表达式、子执行函数等等
getName(){
return this.props.name || '野狗子'
},
render:function () {
let {name} = this.props
return (
<div>
<p>我是子组件-{this.props.name || '野狗子'}</p>
<p>我是子组件-{this.props.name?this.props.name:'野狗子'}</p>
<p>我是子组件-{this.getName()}</p>
<p>我是子组件-{(function (obj) {
return obj.props.name || '野狗子'
})(this)}</p>
</div>
)
}