Props的介绍
每个组件对象都会有props(properties的简写)属性,组件标签的所有属性都保存在props中,所有组件标签的属性的集合对象
作用:通过标签属性从组件外向组件内传递变化的数据 ,注意: 组件内部不要修改props数据
首先来看一下一个简单的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component_props</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.定义组件
function Person(props) {
return (
<ul>
<li>姓名:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
// 2.渲染组件标签
const p1 = {
name: 'lina',
age: 18,
sex: '女'
}
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('example1'))
</script>
</body>
</html>
类型限制和必要性限制
对props中的属性值进行类型限制和必要性限制,使用比较新的react版本,需要引入prop-types.js这个文件
props的数据类型具体查看官方文档:https://react.docschina.org/docs/typechecking-with-proptypes.html
// 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传,如果有默认值就不会报错
age: PropTypes.number.isRequired
}
扩展属性: 将对象的所有属性通过props传递
// ...的作用:一种是打包(就是将一组数据打包到一起),一种是解包()
ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
默认属性值
如果某个props的值设置了默认值,并且设置了必要性限制,那么即使没有传递这个props也不会报错
// 指定属性的默认值
Person.defaultProps = {
age: 18,
sex: '男'
}
组件的构造函数
function Person(props) {
return (
<ul>
<li>姓名:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
Props的使用场景(父子组件之间通信)
Props的使用场景—父组件向子组件传递数据
需求: 自定义用来显示一个人员信息的组件
- 如果性别没有指定, 默认为男
- 如果年龄没有指定, 默认为18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component_props</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// 1.定义组件
// function Person(props) {
// return (
// <ul>
// <li>姓名:{props.name}</li>
// <li>年龄:{props.age}</li>
// <li>性别:{props.sex}</li>
// </ul>
// )
// }
class Person extends React.Component {
render () {
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
</ul>
)
}
}
// 指定属性的默认值
Person.defaultProps = {
age: 18,
sex: '男'
}
// 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传
age: PropTypes.number.isRequired
}
// 2.渲染组件标签
const p1 = {
name: 'lina',
age: 18,
sex: '女'
}
const p2 = {
name: 'jack',
age: 13,
sex: '男'
}
// ...的作用:一种是打包(就是将一组数据打包到一起),一种是解包()
ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
ReactDOM.render(<Person name={p2.name} age={p2.age}/>, document.getElementById('example2'))
</script>
</body>
</html>
上面组件没有状态(state),可以直接使用工厂函数的方式创建组件
Props的使用场景—子组件向父组件传递数据(实际传递的是一个自定义事件)
需求将子组件中的size状态值传递给父组件,是由子组件触发传递的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Fathercomponent extends React.Component {
state = {
size: 0
}
constructor (props) {
super (props)
}
getSize = (size) => {
this.setState({
size: size
})
}
render () {
return (
<div>
<div>子组件的size为:{this.state.size}</div>
<Childcomponent getSize={this.getSize}/>
</div>
)
}
}
class Childcomponent extends React.Component {
static propTypes = {
getSize: PropTypes.func.isRequired
}
state = {
size: 80
}
constructor (props) {
super(props)
}
transmitSize = () => {
let size = this.state.size
this.props.getSize(size)
}
render () {
return (
<div onClick={this.transmitSize}>把我的size传给父组件</div>
)
}
}
// 2. 渲染组件标签
ReactDOM.render(<Fathercomponent />, document.getElementById('example'))
</script>
</body>
</html>