1. 全栈程序员必看首页

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

全栈程序员-用户IM • • 未分类

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)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • javawebday30(验证码在客户端 用当前时间来请求下一张图片 VerifyCode代码)[通俗易懂]

    javawebday30(验证码在客户端 用当前时间来请求下一张图片 VerifyCode代码)[通俗易懂]

    javawebday30(验证码在客户端 用当前时间来请求下一张图片 VerifyCode代码)[通俗易懂]页面运行servlet500错误信息tomcat报错卡住可能是因为映射错误即web.xml中的问题405post改成get方法如果出现不支持post提交可能需要修改表单中的提交方式VerifyCode.javapublicclassVerifyCode{privateintw=70;privateinth=35;…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月15日
  • C# 多线程 Parallel.ForEach 和 ForEach 效率问题研究及理解

    C# 多线程 Parallel.ForEach 和 ForEach 效率问题研究及理解

    C# 多线程 Parallel.ForEach 和 ForEach 效率问题研究及理解最近要做一个大数据dataTable循环操作，开始发现运用foreach，进行大数据循环，并做了一些逻辑处理。在循环中耗费的时间过长。后来换成使用Parallel.ForEach来进行循环。一开始认为， 数据比较大时，Parallel.ForEach肯定比 ForEach效率高，后来发现，其实并不是这样。我用了1000万次循环测试：{CSDN:CODE:2601125}

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月19日
  • c++输入输出流

    c++输入输出流

    输入输出流类关系图iostream头文件中4种流对象1.cout流在内存中对应开辟了一个缓存区，用来存放流中的数据，当向cout流插入一个endl时，不论缓冲区是否已满，都立即输出流中的所有数据

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年12月19日
  • java mediatype属性_Java MediaType.MULTIPART_FORM_DATA属性代码示例[通俗易懂]

    java mediatype属性_Java MediaType.MULTIPART_FORM_DATA属性代码示例[通俗易懂]

    java mediatype属性_Java MediaType.MULTIPART_FORM_DATA属性代码示例[通俗易懂]/***Triestodeterminethecontent/mediatypeofthisHTTPrequestifftheHTTP”Content-Type”*headerwasnotexplicitlysetbytheuser,otherwisetheuserprovidedvalueisused.Ifthe*”Content-…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月25日
  • pycharm激活码2022(注册激活) idea

    pycharm激活码2022(注册激活)

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

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年3月21日
  • java定时任务schedule_timer schedule参数

    java定时任务schedule_timer schedule参数

    java定时任务schedule_timer schedule参数该楼层疑似违规已被系统折叠隐藏此楼查看此楼==============java定时器可以用作，定时刷新缓存等。。。。。。。。。。。timer.schedule(task,firstTime,period);task参数是，TimerTask类，在包：importjava.util.TimerTask.使用者要继承该类，并实现publicvoidrun()方法，因为Tim…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月16日

发表回复

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

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