react组件传值的方法有哪些

这篇文章主要讲解了“react组件传值的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react组件传值的方法有哪些”吧！

1、父向子传值

父组件

classAppextendsReactponent{state={name:'jack',age:19,gender:'男',count:1}render(){return<div>御剑乘风来,除魔天地间!<Child{...this.state}hobby={[1,2,3,4]}></Child></div>}

子组件：

constChild=(props)=>{console.log(props,99);return<div>御剑乘风来,除魔天地间!===Child======{props.count}</div>};

2、子向父传值

父组件

classAppextendsReactponent{state={name:'jack',age:19,gender:'男',count:1}handle2=(msg)=>{console.log(msg,77);//123}render(){return<div>御剑乘风来,除魔天地间!==<ChildgetMsg={this.handle2}></Child></div>}

子组件：

constChild=(props)=>{console.log(props,99);varhandle=()=>{console.log(111);props.getMsg('123')}return<div>御剑乘风来,除魔天地间!===Child======<buttononClick={handle}>child1</button></div>};

3、非父子传值

child1 向 child2 传值

思路：child 传到app ,然后app传到child2

classAppextendsReactponent{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：

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

代码如下：

importReactfrom'react'const{Provider,Consumer}=React.createContext()constChild=(props)=>{console.log(props,99);return<div>御剑乘风来,除魔天地间!===Child</div>};classChild2extendsReactponent{render(){return<div><Consumer>{data=>(<div>御剑乘风来,除魔天地间!==Child2*****{data}</div>)}</Consumer></div>}}classAppextendsReactponent{state={name:'jack',age:19,gender:'男',count:1}render(){return<Providervalue={this.state.count}>御剑乘风来,除魔天地间!=={this.state.name}<Child></Child><Child2></Child2></Provider>}}exportdefaultApp

感谢各位的阅读，以上就是“react组件传值的方法有哪些”的内容了，经过本文的学习后，相信大家对react组件传值的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是主机评测网，小编将为大家推送更多相关知识点的文章，欢迎关注！

上一篇：java分治思想之ForkJoin怎么应用

下一篇：Java多线程同步工具类CyclicBarrier如何使用

---