React-组件通信

父传子

props基本使用

import React, { Component } from 'react'class APP extends Component {render() {return (<div><h1>父子通讯——父组件</h1><hr /><Fn /><Child /></div>)}
}const Fn = () => {return (<div><p>子组件1</p></div>)
}class Child extends Component {render() {return (<div><p>子组件2</p></div>)}
}export default APP

页面显示效果：

子组件是函数组件，用props接收父组件传来的值

子组件是类组件，用props接收父组件传来的值

class 组件需要通过 this.props 来获取，this.porps 属性名是固定的

页面显示效果：

★★★

props是只读对象，单向数据流，子组件只能使用不能修改

可以传递任意数据（数字字符串布尔类型数组对象函数 jsx）

子传父

步骤：

父组件提供一个回调函数（用于接收数据）
将该函数作为属性的值，传递给子组件
子组件通过 props 调用回调函数
将子组件的数据作为参数传递给回调函数

兄弟组件（实际上就是把他转变为父子通信）

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状
父组件：

兄弟组件：

跨多级组件通讯（Context）——也就是两个组件之间间隔较远

// 导入创建 context 的函数
import { createContext } from 'react'// 创建 Context 对象
//   createContext 的返回值是一个 对象
//   对象中包含了两个组件，分别是： Provider 状态的提供者组件（提供状态）  Consumer 状态的消费者组件（使用状态）
const { Provider, Consumer } = createContext()// 使用 Provider 组件包裹整个应用，并通过 value 属性提供要共享的数据
<Provider value="blue"><div className="App"><Node /> </div>
</Provider>// 使用 Consumer 组件接收要共享的数据
<Consumer>{color => <span>data参数表示接收到的数据 -- {color}</span>}
</Consumer>

React-组件通信相关推荐

React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
react组件通信-逆战1913
父组件向子组件通信父组件: import React,{ Component } from "react"; import Childre from"./Childre ...
React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
React组件通信传值父传子子传父兄弟组件传值
一.父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码: import React, { Componen ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
React组件（进阶--生命周期）
目录一.生命周期 - 概述二.生命周期 - 挂载阶段三.生命周期 - 更新阶段四.生命周期 - 卸载阶段文章推荐: 1.JSX基础(入门) 2.React组件(入门) 3.React组件动状 ...
[react] react组件间的通信有哪些？
[react] react组件间的通信有哪些? Props Context ref:通过Ref获取组建的实例,在通过实例拿到组件的属性值或者方法的回调第三方的,Redux是基于Conext基础上的库 ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...

React-组件通信

父传子

props基本使用

子组件是函数组件，用props接收父组件传来的值

子组件是类组件，用props接收父组件传来的值

子传父

兄弟组件（实际上就是把他转变为父子通信）

跨多级组件通讯（Context）——也就是两个组件之间间隔较远

React-组件通信相关推荐

最新文章

热门文章