react组件传值的四种方法

react组件传值 react 传值 2023-05-18 08:05:46 802人浏览薄情痞子

摘要

目录1、父向子传值2、子向父传值3、非父子传值4、Context 方法传值【类似Vue的 provide / inject】1、父向子传值父组件 classAppextends

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

到此这篇关于react组件传值的四种方法的文章就介绍到这了,更多相关react组件传值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: react组件传值的四种方法

本文链接: https://www.lsjlt.com/news/211825.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

react组件传值的四种方法

目录1、父向子传值2、子向父传值3、非父子传值4、Context 方法传值【类似vue的 provide / inject】1、父向子传值父组件 classAppextends...

99+

2023-05-18

react组件传值 react 传值
React父子组件传值(组件通信)的实现方法

目录1、父组件传值子组件2、子组件传值父组件3、兄弟组件传值1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个para...

99+

2022-11-13
Vue父子组件传值的三种方法

目录前言一、Vue父子传值的方法二、方法详解1.props / $emit2.$parent / children3.$ref总结提示：文章写完后，目录可以自动生成，如何生成可参考右...

99+

2022-12-20

Vue父子组件传值 Vue父子组件
vue3中组件传值的多种方法总结

目录第一种: props和 emitsetup语法实现父向子传值第三种: provide和inject 实现后代组件传值第四种: v-model 以及动态属性绑定总结第一种: pro...

99+

2023-01-06

vue3.0 组件传值 vue三种传值方式 vue3组件传值
vue组件间传值的方法你知道几种

目录一丶父子组件传值二丶子父组件传值三丶兄弟组件传值四丶$parent /$children与ref总结一丶父子组件传值先在父组件中给子组件的自定义属性绑定一个父组件的变量 &l...

99+

2022-11-13
react hooks组件间的传值方式是什么

这篇文章给大家介绍react hooks组件间的传值方式是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。父传子通过props传值，使用useState来控制state的状态值父组件 Father.tsx里：子组件 ...

99+

2023-06-25
vue组件传值的11种方式总结

目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9...

99+

2023-01-13

vue组件传值 vue组件组件传值
react四种组件中DOM样式设置方式详解

1、行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方例如：render函数里、组件原...

99+

2022-11-12
Vue3父子组件间传参通信的四种方式

目录前言一、父传子 defineProps二、子传父 defineEmits三、子组件暴露属性给父组件 defineExpose四、依赖注入Provide / Inject参考总结前...

99+

2023-05-19

vue父子组件如何传递参数 vue父子组件传值的方法 vue组件传参方式
vue2.0中组件传值的几种方式总结

目录搭建好测试环境1.方法一父传子子传父2.方法二父传子子传父奇怪的传值3.方法三4.兄弟组件之间传值总结搭建好测试环境 app.vue <template> &l...

99+

2022-12-08

vue2.0组件传值 vue组件传值 vue2.0组件传值方式
详解react hooks组件间的传值方式(使用ts)

目录父传子子传父跨级组件(父传后代)父传子通过props传值，使用useState来控制state的状态值父组件 Father.tsx里：子组件 Child.tsx里： ...

99+

2022-11-12
React路由组件传参的三种方式(params、search、state)

目录向路由组件传递params参数向路由组件传递search参数向路由组件传递state参数总结三种向路由组件传参的方式向路由组件传递params参数当点击消息1这个导航链接时，展...

99+

2022-11-13
详解JAVA中获取文件MD5值的四种方法

在Java中，可以使用以下四种方法来获取文件的MD5值：1. 使用java.security.MessageDigest类：可以使用...

99+

2023-08-11

java
React中如何传入组件的props改变时更新组件的几种实现方法

这篇文章将为大家详细讲解有关React中如何传入组件的props改变时更新组件的几种实现方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。何时使用派生状态咱们先来看一个比...

99+

2022-10-19
angular组件传值的方法有哪些

Angular组件之间传值的方法有以下几种：输入属性（@Input）：在子组件上通过@Input装饰器定义一个输入属性，然后在...

99+

2023-10-24

angular
uniapp组件传值的方法有哪些

这篇文章主要介绍“uniapp组件传值的方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uniapp组件传值的方法有哪些”文章能帮助大家解决问题。父组件给子组件传值创建子组件comp.vue...

99+

2023-07-05
React将组件作为参数进行传递的3种方法实例

目录前言方式一：直接传递 jsx 创建好的元素方式二：直接传递组件本身方式三：传递一个返回组件的函数三种方案的对比总结前言在日常的开发中，开发通用组件的机会其实并不多，尤其是在各种...

99+

2022-11-13
分享Vue子组件接收父组件传值的3种方式

目录1.简单声明接收2.接收数据的同时进行类型限制3.接收数据的同时对数据类型、必要性、默认值进行限制父组件代码↓ <template> <...

99+

2022-11-13
vue组件传值有什么方法

这篇文章主要为大家展示了“vue组件传值有什么方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue组件传值有什么方法”这篇文章吧。vue组件传值的五种方法：1、父组件向子组件进行传值；2、子...

99+

2023-06-25
vue组件传值的方式

vue组件传值的方式：1、父传子；2、子传父；3、兄弟传值；4、问号传值，冒号传值和父子组件传值；5、使用“$ref”传值；6、使用“inject”给当前实例注入父组件的数据；7、祖传孙；8、孙传祖；9、$parent；10、session...

99+

2023-07-18