web前端全系列 教程
1839个小节阅读:2243.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
我们先来回顾组件之间的数据传递,之前我们讲过,是通过 props
实现的,但是 props
是实现父传子的,当然也可以传递函数之后实现子传父。
我们来实现一个同级组件传递数据
ximport React from 'react'
export default function ComponentA(props) {
const message = "这是ComponentA组件的数据"
const sendMessageHandler = () =>{
props.onMessage(message)
}
return (
<div>
<h3>ComponentA</h3>
<button onClick={ sendMessageHandler }>发送数据</button>
</div>
)
}
xxxxxxxxxx
import React from 'react'
export default function ComponentB(props) {
return (
<div>
<h3>ComponentB</h3>
<p>{ props.msg }</p>
</div>
)
}
xxxxxxxxxx
import React,{ useState } from "react"
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
function App() {
const [msg , setMsg] = useState("")
const messageHandler = (data) => {
setMsg(data)
}
return (
<div className="App">
{/* 在组件A中传递数据给组件B */}
<ComponentA onMessage={messageHandler} />
<ComponentB msg={ msg }/>
</div>
);
}
export default App;
这种方式虽然可以实现同级组件传递数据,但是却很麻烦,如果组件之间的关系更为复杂,传递数据会更麻烦。此时有没有更好的方案呢!当然是有的,他就是 状态管理