react中类组件传值,函数组件传值:父子组件传值、非父子组件传值[通俗易懂]

react中类组件传值,函数组件传值:父子组件传值、非父子组件传值[通俗易懂]react中父子组件传值

大家好,又见面了,我是你们的朋友全栈君。

父子组件传值、非父子组件传值;

类组件传值

父子 组件传值

子 传 父:

            子组件:事件的触发
            sendMsg=()=>{
                this.props.person();
            }

            父组件:
                <Child person={this.getMsg}></Child>
                getMsg=(data)=>{
                    console.log(data);
                }

父 传 子:

            父组件
            state = {
                num : 100
            }
            <Child num={this.state.num}></Child>
            
            子组件
                this.props.num

父子组件传值案例(导航下拉框效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件传值导航效果</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src='https://unpkg.com/babel-standalone@6.15.0/babel.min.js'></script>
    <style> #box{ 
      width: 80%; padding: 10px; margin: auto; outline: 1px solid red; overflow: hidden; } .nav{ 
      display: flex; justify-content: space-around; } .nav span{ 
      height: 30px; } </style>
</head>
<body>
    <div id="box"></div>
</body>

<script type="text/babel"> class Nav extends React.Component{ 
      constructor(props){ 
      super(props); this.state = { 
      title:['区域','价格','房型','朝向'], num : 0 } } render(){ 
      return( <React.Fragment> <div className="nav"> { 
      this.state.title.map((item,i)=>{ 
      return <span key = { 
     i} onClick={ 
     ()=>{ 
     this.getindex(i)}}>{ 
     item}</span> }) } </div> <NavSecond index={ 
     this.state.num} tab={ 
     this.getData}></NavSecond> </React.Fragment> ) } getindex = (index)=>{ 
      console.log(index); this.setState({ 
      num:index }) } getData = (text)=>{ 
      this.state.title.splice(this.state.num,1,text) this.setState({ 
      title:this.state.title }) console.log(text); } } class NavSecond extends React.Component{ 
      constructor(props){ 
      super(props); this.state = { 
      con:[ ['高新区','中原区','二七区','经开区','荥阳'], ['20W','40W','60W','80W','100W'], ['一室','两室','三室','四世','复式'], ['朝南','朝东','朝西','朝北'] ] } } render(){ 
      return ( <React.Fragment> { 
      this.state.con[this.props.index].map((item,i)=>{ 
      return <p key = { 
     i} onClick={ 
     ()=>{ 
     this.sendData(item)}}>{ 
     item}</p> }) } </React.Fragment> ) } sendData=(text)=>{ 
      this.props.tab(text); } } ReactDOM.render(<Nav/>,document.querySelector('#box')); </script>
</html>

非父子 组件传值

    **方法:
    1)redux 公共池(只能使用在脚手架中)
    2)按照原来父子组件之间的关系,进行一层层传递
    3)context上下文(官方提供的数据传输的方式)     推荐使用这种方式**

步骤:

  1. 声明context组件
    let context = React.createContext();
  2. 在你需要发送数据的组件上写上 context.Provider发送数据
    <context.Provider value={要发送的数据}>
    <组件标签 ></组件标签>
    </context.Provider>
  3. 在需要接受数据的组件上 写上 context.Consumer 消费者组件,来接受数据
    <context.Consumer>
    {value=>{value}怎么渲染数据}
    </context.Consumer>

案例:

<script type='text/babel'>
    
    class A extends React.Component{ 
   
        constructor(props){ 
   
            super(props)
            this.state = { 
   
                data:''
            }
        }
        render(){ 
   
            return (
                <div>
                    a组件 -- { 
   this.state.data}
                    { 
   /* 接收B组件传递过来的值 */}
                    <B num={ 
   this.getData}></B>
                    { 
   /* 将A组件中的数据传递给C组件 */}
                    <C msg={ 
   this.state.data}></C>
                </div>
            )
        }
        getData=(data)=>{ 
   
            this.setState({ 
   
                data
            })
        }
    }
    class B extends React.Component{ 
   
        constructor(props){ 
   
            super(props)
            this.state = { 
   
                num:'张三丰'
            }
        }
        render(){ 
   
            return (
                <div>
                    B组件
                    <button onClick={ 
   ()=>{ 
   this.sendData(this.state.num)}}>发送数据给A组件</button> 
                </div>
            )
        }
        sendData=(data)=>{ 
   
            this.props.num(data);
        }
    }
    class C extends React.Component{ 
   
        render(){ 
   
            return (
                <div>
                    C组件 -- { 
   this.props.msg}
                </div>
            )
        }
    }
    ReactDOM.render(<A></A>,document.getElementById('app'));
</script>

函数式组件传值:

父子组件传值

父传子:

        1)在父组件中找对子标签,在子组件的标签上添加自定义属性,自定义属性名 = {要发送的数据}
            <Child 自定义属性名={要发送的数据}></Child>
        2)在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据,同时在子组件的函数中接受一个参数 props
            function 子组件名(props){
                return(
                    <div>{props.自定义属性名}</di>
                )
            }

子传父:

		前提必须要有props,在函数组件的行參的位置,需要的是子组件的函数的props
        1)在子组件中自定义一个数显进行数据发送,在需要出发的dom元素上面绑定自定义事件
        子组件模板
            <p onClick={自定义事件}></p>
            function 自定义事件(){
                props.**自定义属性名a**(要发送的数据)
            }

        2)在父组件中找到子组件标签,在子组件标签上面写 自定义属性={新的自定义方法}
            <子组件标签 **自定义属性名a**={新的方法}></子组件标签>
		(这个两个  **自定义属性名** 要一致)
        3)父组件中接收自定义参数,这个自定义参数就是子组件传递给父组件的数据
            function 新的方法(参数){
                console.log(参数) // 参数就是子组件传递给父组件的数据
            }

函数式父子组件传值案例

父组件 A.js

import React, { 
    useState } from 'react'
import Aa from './Aa'

export default function A() { 
   
    
    const [msg,setMsg] = useState('这是父组件需要传递的信息');
    const [arr,setArr] = useState([1,2,3,4,5,6])
  return (
    <div>
        A
        <Aa name={ 
   msg} arr={ 
   arr} msg={ 
   get}></Aa>
    </div>
  )
  function get(a,b){ 
   
      console.log(a,b);
  }
}

子组件 Aa.js

import React, { 
    useState } from 'react'

export default function Aa(props) { 
   

    const [msg,setMsg]=useState('Aa子组件的值')
  return (
      <React.Fragment>
        <div>{ 
   props.name}</div>
        <div>
            { 
   
                props.arr.map((item,i)=>
                    <li key={ 
   i}>父组件传递过来的arr里面遍历过来的第{ 
   i+1}:{ 
   item}</li>
                )
            }
        </div>
        <br/>
        <button onClick={ 
   ()=>send(1)}>传值给父组件</button>
      </React.Fragment>
  )
  function send(i){ 
   
      console.log(i);
      props.msg(msg,i)
  }
}

非父子组件传值

函数组件中我们一般情况下使用useEffect实现数据的请求
// useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount (加载,更新,卸载)这三个函数的组合。
语法格式:
useEffect(()=>{

},[])

父传子 class
父组件中子组件标签中,传递属性 msg=‘11111’
子组件件接收 this.props.msg

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145339.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • TTL232和RS232的区别

    逻辑电平定义不同:TTL232的0是用0v表示。1是用5V表示。RS232的0是用+3V–+15V表示,1是用-3V—15V表示。接口一般都用三根线,1:地线。2:写入。3:导出。他们不可直连,中间需接电平转接板,…

  • 二、第一个java程序:HelloWorld

    二、第一个java程序:HelloWorld前面讲解了java程序的配置,现在要开始进入实例的编程了,第一个程序还是沿用经典的HelloWorld程序进行讲解。一、编程源代码     打开记事本,输入以下代码:publicclassHelloWorld{     //程序的主函数入门     publicstaticvoidmain(Stringargs[])

  • 激活成功教程WEP密钥过程全解(上)[通俗易懂]

    激活成功教程WEP密钥过程全解(上)[通俗易懂]激活成功教程WEP密钥过程全解(上)

    2022年10月26日
  • phpstorm 2021.8.4激活码(JetBrains全家桶)

    (phpstorm 2021.8.4激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~65MJ…

  • java.lang_java.lang.AbstractMethodError[通俗易懂]

    java.lang_java.lang.AbstractMethodError[通俗易懂]/***用户管理*/publicvoiduserManage(){render(“userManage.html”);//renderHtml(“userManage.html”);}进入方法后出现的问题。。。。哎,,各位大神帮我分析分析可好??????用的3.33.4jfinal整合shrio插件五月14,20189:21:19下午org.apache.catalina.c…

  • PCB设计中的20H原则

    “20H原则”是指要确保电源平面边缘比地平面(0V参考面)边缘至少缩进相当于两个平面之间间距的20倍,其中H就是指电源平面与地平面之间的距离,如下图。为什么需要20H原则?在高速PCB中,通常电源平面和地平面间相互耦合RF能量成为边缘磁通泄露情况,而且RF能量(RF电流)会沿着PCB边缘辐射出去,为了减少这种耦合效应,所有的电源平面物理尺寸都要比最近邻的地平面尺寸小20H。补充…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号