组件的props 接受传递给组件的数据
// 组件的props
// 函数组件接收数据
// const Hello = (props) => {
// // props是一个对象
// console.log(props);
// return (
// <div>
// <h1>props:{ props.name }</h1>
// </div>
// )
// }
// // 传递数据
// 类组件传递数据
class Hello extends React.Component{
render () {
console.log(this.props);
return (
<div>
<h1>props:{ this.props.age }</h1>
</div>
)
}
}
reactDom.render(<Hello name="rose" age={19} />,document.getElementById('root'))
组件的通讯方式 三种方式
1.父组件 -子组件
// 父组件-子组件传值
// 父组件
class Parent extends React.Component{
state = {
lastName:'王'
}
render () {
return (
<div className="parent">
父组件:
<Child name={this.state.lastName} />
</div>
)
}
}
// 子组件
const Child = (props) => {
console.log(props);
return (
<div className="child">
<p>子组件,接收父组件的数据:{ props.name }</p>
</div>
)
}
reactDom.render(<Parent />,document.getElementById('root'))
2.子组件-父组件
// 父组件
class Parent extends React.Component{
state = {
Parmsg:''
}
// 提供回调函数,接收数据
getChildMsg = data => {
console.log('子组件传递过来的数据', data);
this.setState({
Parmsg:data
})
}
render () {
return (
<div>
父组件:{this.state.Parmsg}
<Child getMsg={this.getChildMsg} />
</div>
)
}
}
// 子组件
class Child extends React.Component{
state = {
msg:'刷抖音'
}
handleclick = () => {
this.props.getMsg(this.state.msg)
}
render () {
return (
<div>
子组件:<button onClick={this.handleclick}>点我给父组件传值</button>
</div>
)
}
}
reactDom.render(<Parent />,document.getElementById('root'))
3.兄弟组件
class Counter extends React.Component{
// 提供共享状态
state = {
count:0
}
// 提供修改状态的方法
onIncrement = () => {
this.setState({
count:this.state.count+1
})
}
render () {
return (
<div>
<Child1 count={this.state.count} />
<Child2 onIncrement={this.onIncrement} />
</div>
)
}
}
const Child1 = (props) => {
return <h1>计数器:{ props.count}</h1>
}
const Child2 = (props) => {
return <button onClick={()=>props.onIncrement()}>+1</button>
}
reactDom.render(<Counter/>,document.getElementById('root'))