组件之间的通讯,props

组件的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'))