props的基础使用
React依赖包我已上传地址如下:https://download.csdn.net/download/weixin_39162041/86264167
<script type="text/babel">
//创建组件
class Person extends React.Component{
render(){
const {name,age,sex} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{age}</li>
<li>年龄:{sex}</li>
</ul>
)
}
}
//对标签属性进行类型。必要性的限制。
Person.defaultProps={ //如果值不传或者为空的时候,可以设置默认值
sex:'不男不女',
age:18
}
// 对标签属性进行类型、必要性的限制
//前提:需要引入<script type="text/javascript" src="./js/prop-types.js"></script>
Person.propTypes = {//一定注意关键字的大小写
name:PropTypes.string.isRequired, //name必须为字符串类型,必须传
sex:PropTypes.string,//sex必须为字符串类型
age:PropTypes.number,//age必须为数字类型
speak:PropTypes.func //函数类型设置限制属性时,为func (特别注意) .
}
ReactDOM.render(<Person name='tom' age='18' sex='男' speak='speak'/>,document.getElementById('test'))
//如果数据多的情况下,可以使用展开运算符,结合babel和React的语法组件传值得时候,可以用来展开一个对象,如下:
ReactDOM.render(<Person {...data} />,document.getElementById('test'))
function speak(){
}
</script>
//props简写方式
<script type="text/babel">
//创建组件
class Person extends React.Component{
//对标签属性进行类型。必要性的限制。
static defaultProps={
sex:'不男不女',
age:18
}
static propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
}
state = {}
render(){
const {name,age,sex} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{age}</li>
<li>年龄:{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name='tom' age='18' sex='男'/>,document.getElementById('test'))
</script>