组件的props：
1.组件是封闭的，要接收外部数据应该通过props来实现。
2.props的作用，接收传递给组件的数据。
3.传递数据：给组件标签添加属性
4.接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据。
特点：
1.可以给组件传递任意类型的数据。
2.props是只读对象，只能读取属性的值，不能修改对象。
3.使用类组件时，如果写了构造函数，应该将props传递给super（），否则无法在构造函数中获取props。
父->子传值
import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
constructor(){
super()
this.state={
info:"天冷了要加衣"
}
}
render() {
return (
<div>我是父组件
{/* 注册子组件 ,通过msg传递给子组件*/}
<ComSmall msg={this.state.info}></ComSmall>
</div>
)
}
}import React, { Component } from 'react'
export default class ComSmall extends Component {
constructor(props){
// 此处不传props
super(props)
this.state={ }
// console.log(this.props);此处打印的是undefined，传递后打印的是数据
}
render() {
return (
<div>我是子组件
{/* 接收父组件传值 */}
{this.props.msg}
</div>
)
}
}子->父传值
利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
import React, { Component } from 'react'
export default class ComSmall extends Component {
constructor(){
super()
this.state={
msg:"给你买了一部手机"
}
}
sendMsg(){
// 子组件调用父组件传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render() {
return (
<div>我是子组件
<button onClick={()=>this.sendMsg()}>给父组件传值</button>
</div>
)
}
}import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
constructor(){
super()
this.state={
data:""
}
}
getChindMsg=(val)=>{
// console.log("获得子组件传过来的值：",val);
this.setState({
data:val
})
}
render() {
return (
<div>我是父组件
<p>获得子组件传过来的值：{this.state.data}</p>
{/* 将回调函数传递给子组件 */}
<ComSmall getMsg={this.getChindMsg}></ComSmall>
</div>
)
}
}
