react组件传值的几种方法

1、父向子传值

父组件

class App extends React.Component {
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}
	render() {
		return <div >
			哈哈哈
			<Child {...this.state}  hobby={[1,2,3,4]}></Child>
		</div>
	}
  
  子组件：
  const Child = (props) => {
    console.log(props,99);
    return <div>
     哈哈哈==Child======{props.count}
    </div>
	};

2、子向父传值

父组件

class App extends React.Component {
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}
  handle2=(msg)=>{
		console.log(msg,77); //  123
	}
	render() {
		return <div >
			哈哈哈
			<Child getMsg={this.handle2}></Child>
		</div>
	}
  
  子组件：
  const Child = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return <div>
      哈哈哈Child======
    	<button onClick={handle}>child1</button>
    </div>
	};

3、非父子传值

child1 向 child2 传值
思路：child  传到app  ,然后app传到child2

class App extends React.Component {
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}
  handle2=(msg)=>{
		console.log(msg,77); //  123
    this.setState({
      count:this.state.count+msg
    })
	}
	render() {
		return <div >
			哈哈哈!==
			<Child getMsg={this.handle2} ></Child>
    
    	<Child2 count={this.state.count}></Child2>
		</div>
	}
  
  子组件1：
  const Child = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return <div>
      哈哈哈Child======
    	<button onClick={handle}>child1</button>
    </div>
	};

  const Child2 = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return <div>
      哈哈哈Child======
    	<button onClick={handle}>child1</button>
    </div>
	};

4、Context 方法 传值 【类似vue的 provide / inject】

步骤：
1- const  {Provider,Consumer} = React.createContext()
2- Provider包裹父组件 定义value是需要传的值  ====<Provider value={this.state.count}>
3- Consumer包裹需要接收数据的组件 data接收数据
  <Consumer >
			{data=>(
					<div>
						哈哈哈 ==Child2*****{data}				
					</div>
			)}
      
代码如下：

import React from 'react'

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

const Child = (props) => {
	console.log(props,99);
	
	return <div>
		哈哈哈!===Child
		
</div>
};

class Child2 extends React.Component {
	render() {
		return <div>
				<Consumer >
			{data=>(
					<div>
						哈哈哈 ==Child2*****{data}				
					</div>
			)}
			</Consumer>
		</div>
	}
}

class App extends React.Component {
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}

	render() {
		return <Provider value={this.state.count}>
			哈哈哈!=={this.state.name}
			<Child></Child>
			<Child2></Child2>
		</Provider>
	}
}
export default App