React跨组件传值
前言
应用场景
上图是一个react形成的嵌套组件树,如果需要跨组件传值,该怎么办呢?如果使用
props
一层一层的往下面传,就很麻烦.
可以通过Context
,就可以在组件树之间进行数据传递
一.hook跨组件传值
实现步骤
- 使用
createContext
创建Context对象 - 在顶层组件通过
Provider
提供数据 - 在底层组件通过
useContext
函数获取数据
代码实现
import React, { createContext,useState,useContext } from "react";
// 通过 react 的 createContext 实现跨组件传值
const Context = createContext();
function DemoA() {
// 通过 useContext 获取顶层的数据
const count = useContext(Context);
return (
<div>
DemoA
顶层传递来的数据:{count}
<DemoC />
</div>
);
}
function DemoC() {
const count = useContext(Context);
return <div>DemoC
顶层传递的数据:{count}
</div>;
}
function ConText() {
const [count,setCount] = useState(0);
return (
// 使用 Provier 包裹最外层组件,利用 value 属性向n个子组件传递数据
<Context.Provider value={count}>
<div>
<h1>context</h1>
<button onClick={()=>setCount(count 1)}>{count}</button>
<hr />
<DemoA />
</div>
</Context.Provider>
);
}
效果展示
二.类组件跨组件通信
实现步骤
- 导入
createContext
方法并执行 - 使用
Proveider
包裹根组件 - 通过
Consumer
使用数据
代码实现
import React, { createContext } from "react";
// 1.导入 createContext 方法并执行
const { Provider, Consumer } = createContext()
function DemoA() {
return (
<div>this is DemoA
<DemoC />
</div>
)
}
function DemoC() {
return (
<div>
this is DemoC <br />
{/* 3.通过 Consumer 使用数据 */}
<Consumer>
{value => <span>{value}</span>}
</Consumer>
</div>
)
}
class App extends React.Component {
state = {
message: "this is message"
}
render() {
return (
// 2.使用 Proveider 包裹根组件
<Provider value={this.state.message}>
<div>
<DemoA />
</div>
</Provider>
)
}
}
export default App
效果展示
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfifiic
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13