react组件传值的几种方法

1、父向子传值

父组件

classAppextendsReact.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、子向父传值

父组件

classAppextendsReact.Component{
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}
  handle2=(msg)=>{
		console.log(msg,77); //  123
	}
	render() {
		return<div >
			御剑乘风来,除魔天地间!==
			<ChildgetMsg={this.handle2}></Child>
		</div>
	}
  
  子组件：
  const Child = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return<div>
      御剑乘风来,除魔天地间!===Child======
    	<buttononClick={handle}>child1</button></div>
	};

3、非父子传值

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

classAppextendsReact.Component{
	state={
		name:'jack',
		age:19,
		gender:'男',
		count:1
	}
  handle2=(msg)=>{
		console.log(msg,77); //  123this.setState({
      count:this.state.count+msg
    })
	}
	render() {
		return<div >
			御剑乘风来,除魔天地间!==
			<ChildgetMsg={this.handle2} ></Child>
    
    	<Child2count={this.state.count}></Child2>
		</div>
	}
  
  子组件1：
  const Child = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return<div>
      御剑乘风来,除魔天地间!===Child======
    	<buttononClick={handle}>child1</button></div>
	};

  const Child2 = (props) => {
    console.log(props,99);
    var handle=()=>{
			console.log(111);
      props.getMsg('123')
		}
    return<div>
      御剑乘风来,除魔天地间!===Child======
    	<buttononClick={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>
};

classChild2extendsReact.Component{
	render() {
		return <div>
				<Consumer >
			{data=>(
					<div>
						御剑乘风来,除魔天地间! ==Child2*****{data}				
					</div>
			)}
			</Consumer>
		</div>
	}
}

classAppextendsReact.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