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

类组件传值

父子组件传值

子传父：

            子组件：事件的触发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上下文(官方提供的数据传输的方式)     推荐使用这种方式**

步骤：

声明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.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 propsfunction 子组件名(props){return(<div>{props.自定义属性名}</di>)}

子传父：

     前提必须要有props，在函数组件的行參的位置，需要的是子组件的函数的props1）在子组件中自定义一个数显进行数据发送，在需要出发的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

react中类组件传值，函数组件传值：父子组件传值、非父子组件传值相关推荐

this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
react梳理之(非)受控组件
react开始梳理,不会从最基本的创建一个react项目开始,只是梳理一些概念,今天简单梳理一个较为简单的概念,就是受控组件与非受控组件一.react的非受控组件 1.什么叫非受控组件我们从两个字 ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
react受控组件和非受控组件区别
一.受控组件在HTML中,表单元素的标签..等的值改变通常是根据用户输入进行更新. 在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的Re ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
重新认识受控和非受控组件
该文章包含如下内容受控与非受控组件非受控组件受控组件受控和非受控组件边界反模式解决方案前言在 HTML 中,表单元素(<input>/<textarea>/< ...

react中类组件传值，函数组件传值：父子组件传值、非父子组件传值

类组件传值

父子组件传值

子传父：

父传子：

父子组件传值案例（导航下拉框效果）

非父子组件传值

函数式组件传值：

父子组件传值

父传子:

子传父：

函数式父子组件传值案例

父组件 A.js

子组件 Aa.js

非父子组件传值

react中类组件传值，函数组件传值：父子组件传值、非父子组件传值相关推荐

最新文章

热门文章

react中类组件传值，函数组件传值：父子组件传值、非父子组件传值

类组件传值

父子 组件传值

子 传 父：

父 传 子：

父子组件传值案例（导航下拉框效果）

非父子 组件传值

函数式组件传值：

父子组件传值

父传子:

子传父：

函数式父子组件传值案例

父组件 A.js

子组件 Aa.js

非父子组件传值

react中类组件传值，函数组件传值：父子组件传值、非父子组件传值相关推荐

最新文章

热门文章

父子组件传值

子传父：

父传子：

非父子组件传值