哈尔滨建站模板源码,公司名字大全霸气,在网上怎么注册公司,代练网站建设视频1. 组件通信
组件间的数据传递
1.1 父传子
步骤#xff1a;
父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据
function Son(props) {return div{props.value}/div
}function App() {const value 父组件传给子…1. 组件通信
组件间的数据传递
1.1 父传子
步骤
父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据
function Son(props) {return div{props.value}/div
}function App() {const value 父组件传给子组件的值return (div classNameAppSon value{value} //div);
}export default App; -props说明
function Son(props) {console.log(props, props)return div{props.value}/div
}function App() {const value 父组件传给子组件的值return (div classNameAppSonvalue{value}age{100}list{[a, b]}obj{{ key: 11 }}isTrue{false}clickButton{() {console.log(click button)}}dom{spanhello/span}//div);
}export default App; 特色的prop —— children
function Son(props) {return div我是子组件 {props.children}/div
}function App() {return (div classNameAppSondiv我就是那个特殊的prop/div/Son/div);
}export default App; 1.2 子传父
核心思路子组件调用父组件的函数并传递参数
function Son(props) {return button onClick{() props.onUpdateMsg(子组件中的数据我要传给父组件)}click me/button
}function App() {function getSonMsg(msg) {alert(msg)}return (div classNameAppSon onUpdateMsg{getSonMsg} //div);
}export default App; 1.3 兄弟组件传值 —— 状态提升
核心传给共同的父组件进行数据传递子传父 父 姐姐爸爸你跟妹妹说我是她姐姐 爸爸妹妹你姐说你是她的妹妹 哈哈哈哈哈哈哈
import { useState } from react
function BigSister(props) {return button onClick{() props.onUpdateMsg(爸爸告诉妹妹我是她姐姐)}click me/button
}function SmallSister(props) {return div姐姐对妹妹说的{props.value}/div
}function App() {const [bigToSmallMsg, setBigToSmallMsg] useState();function getBigSisterMsg(msg) {setBigToSmallMsg(msg)}return (div classNameAppBigSister onUpdateMsg{getBigSisterMsg} /SmallSister value{bigToSmallMsg} //div);
}export default App;1.4 跨层组件通信 —— context import { createContext, useContext } from react
// step 1
const MoneyContext createContext()
function Father(props) {return div我是爸爸Son //div
}function Son(props) {// step 3消费const money useContext(MoneyContext)return div我是儿子 ------span这是我爷爷留给我的财产{money}/span/div
}function App() {const money 100000000return (// step 2: 提供MoneyContext.Provider value{money}div classNameApp我是爷爷Father //div/MoneyContext.Provider);
}export default App; 参考
黑马程序员react教程
