react组件之间的通信

1.父组件给子组件传值需要使用props

const Hello = props => {
	console.log(props)
	return(
		<div>
			<h1>props:{props.name}</h1>
		</div>
	)
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Hello name="jack" age={19}></Hello>
);

class App extends React.Component {
  
 render() {
     console.log(this.props)
	 return (
		<div>1</div>
	 )
   } 
}

props当中的值是只读属性的，不能进行修改
使用类组件时，如果写了构造函数，应该将props的值传递给super()，否则无法在构造函数中获取到props

class App extends React.Component {
  
  constructor(props) {
      super(props)
	  
	  console.log(this.props)
  }
  
 render() {
     console.log(this.props)
	 return (
		<div>1</div>
	 )
   } 
}

2.子组件需要通过事件的方式传值给父组件：

class App extends React.Component {
	state = {
		parentMsg:''
	}

	getChildMsg = data => {
		console.log('接收到子组件中传递过来的数据:',data)
		this.setState({
			parentMsg:data
		})
	}

	render(){
		return(
			<div className="parent">
				父组件:{this.state.parentMsg}
				<Child getMsg={this.getChildMsg}/>
			</div>
		)
	}
}

class Child extends React.Component{ 
state = {
	msg:'test'
}
handleClick = () => {
	this.props.getMsg(this.state.msg);
}

render(){
	return (
		<div className="child">
			子组件:<button onClick={this.handleClick}>点我，给父组件传递数据</button> 
		</div>
	)
}
}

3.兄弟组件通信：将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

const Child1 = (props) => {
  return <h1>计数器: {props.count}</h1>
}

const Child2 = (props) => {
  return <button onClick={() => { props.onIncrement() }}>+1</button>
}

class App 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>
    )
  }

}

Provider,Consumer跨组件通信：

const { Provider,Consumer } = React.createContext()

const Node = props => {
	return (
		<div className="node">
			<SubNode/>
		</div>
	)
}

const SubNode = props => {
	return (
		<div className="subnode">
			<Child/>
		</div>
	)
}

const Child = props => {
	
	return <div className="child">
		<Consumer>
			{
				data => <span>我是子节点--{data}</span>
			}
		</Consumer>
	</div>
}

class App extends React.Component {
  

  render() {
    return (
		<Provider value="pink">
		  <div>
			<div className="app">
				<Node/>
			</div>
		  </div>
		</Provider>
    )
  }

}