版权声明:前端菜鸟--人间草木所有 https://blog.csdn.net/qq_43258252/article/details/87969906
效果图:
父组件
import React, { Component } from 'react'
// 引用子组件 声明的名字 必须大写
import MyInfo from './myInfo'
class my extends Component {
constructor(props) {
super(props)
// console.log(props)
this.state = {}
}
componentWillMount() {
}
render() {
return (
<div className="my">
my我的
{/* 给 子组件 传递 props:msg (如果你想要传递numb类型是数据 就需要 写成 msg={20}) */}
<MyInfo msg="我是react父组件传给子组件的信息" />
</div>
)
}
}
export default my
子组件
import React, { Component } from 'react'
class myInfo extends Component {
constructor(props) {
super(props)
this.state = {}
// 子组件通过 props 去获取到 msg
console.log(this.props.msg)
}
render() {
return (
<div className="myInfo">
myInfo
<br />
{/* 子组件通过 props 去获取到 msg */}
{this.props.msg}
<br />
</div>
)
}
}
export default myInfo