react组件传值的几种方式

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下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

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!