代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_component_props</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/babel">
/*
* 需求:自定义用来显示一个人员信息的组件,效果如页面。
* 1.如果性别没有指定,则默认为男
* 2.如果年龄没有指定,则默认为18
* */
//1.定义组件
function Person(props){
return(
<ul>
<li>性别:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
//1.1给组件指定属性默认值
Person.defaultProps = {
sex: '男',
age: 18
}
//2.2给组件指定属性值的类型和必要性
Person.propTypes={
name: PropTypes.string.isRequired,
age: PropTypes.number
}
//2.渲染组件标签
const p1 = {
name: 'Tom',
age: 18,
sex: '女'
}
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('example'))
const p2 = {
name: 'Jack'
}
ReactDOM.render(<Person name={p2.name} />,document.getElementById('example1'))
const p3 ={
name:'Lucy',
age:20,
sex:'女'
}
ReactDOM.render(<Person {...p3}/>,document.getElementById('example2'))
</script>
</body>
</html>
运行结果:
代码讲解
- 组件中的props属性是一组组的键值对,从React.render()渲染时候获取
- 上面我们通过方法来定义组件,如果通过类类定义组件,则需要在props前面+this.
class Person extends React.Component {
render() {
return (
<ul>
<li>性别:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
</ul>
)
}
}
- 给组件设置默认值用 组件.defaultProps方法
Person.defaultProps = {
sex: '男',
age: 18
}
- 给组件规定类型和格式用 组件.propTypes方法;string、number代表该元素的类型;isRequired代表必填的内容
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
- {…p3}是讲p3这个类全部作为props传入组件
const p3 ={
name:'Lucy',
age:20,
sex:'女'
}
ReactDOM.render(<Person {...p3}/>,document.getElementById('example2'))