網站首頁 編程語言 正文
組件間傳值
props
父傳子:通過自定義屬性向子組件傳值,值可以是任何類型
子傳父:通過父組件把方法傳給子組件,子組件調用傳過去的方法完成傳值
注:
1.定義方法時盡可能的去使用箭頭函數定義
2.調用時,盡可能的寫小括號
父組件中的方法 // 成員方法 箭頭函數來定義,這樣就沒有this指向問題 setNum = (n = 1) => this.setState(state => ({ num: state.num + n })) <Child num={num} setNum={this.setNum} /> 子組件中 <button onClick={() => setNum(2)}>+++++</button> 子去修改父傳過來的數據,props它是單向數據流,子不能直接去修改
ref
- 父子間傳值:通過ref引用對象完成對于【類組件】之間通信
-
this.childRef.current
得到當前Child組件的實例對象
childRef = createRef() <Child ref={this.childRef} /> ++++++++++++++++++++++++++++++++ this.setState({ title: this.childRef.current.state.title }) this.childRef.current.setState({ title: this.state.msg }) this.childRef.current.setTitle(this.state.msg)
狀態提升
此方案用來解決兄弟組件間的傳值問題,就是把共用的狀態信息提升到父組件狀態中。
import React, { Component } from 'react' class Child1 extends Component { render() { let { setMsg } = this.props return ( <div> <input type="text" onChange={e => setMsg(e.target.value)} /> </div> ) } } class Child2 extends Component { render() { let { msg } = this.props return ( <div> <h3>{msg}</h3> </div> ) } } class App extends Component { state = { msg: '' } setMsg = msg => this.setState({ msg }) render() { return ( <div> <h1>{this.state.msg}</h1> <Child1 setMsg={this.setMsg} /> <Child2 msg={this.state.msg} /> </div> ) } } export default App
或者:
class App extends Component { state = { msg: '', setMsg: msg => this.setState({ msg }) } render() { let { msg, setMsg } = this.state return ( <div> <h1>{msg}</h1> {/* <Child1 setMsg={setMsg} /> */} {/* <Child2 msg={msg} /> */} <Child1 {...this.state} /> <Child2 {...this.state} /> </div> ) } }
跨組件通信
context實現在跨組件通信,一般用于自定義組件
- context一個項目中可以有N個,但是一般情況下我們使用它,都是把它放在App組件中,一個項目一個。
- 因為Context會讓組件變得不純粹,因為依賴了全局變量。所以這決定了Context一般不會大規模的使用。所以一般在一個組件中使用一個Context就好。
- context實現在跨組件通信,一般用于自定義組件所用
- context綁定消費是一定是一個對象
import { createConext } from 'react' const ctx = createContext() const { Provider, Consumer } = ctx export { ctx as default, Provider, Consumer }
- Provider,Consumer 都是組件
- Provider 生產數據的組件
- Consumer 消費的組件
導入
在App組件中生產數據,這樣下面的子孫組件就可以調用此context
對象來消費數據,value屬性就是生產的數據源
app.jsx
import Child from './pages/Child' import { Provider } from './context/appContext' class App extends Component { state = { name: "張三", setName: (name) => this.setState({ name }), }; ======================================================= render() { return ( <div> {/* value屬性就是生產的數據源 */} <Provider value={this.state}> <Child /> </Provider> </div> ); } }
child.jsx文件
兩種方法來消費(獲取)數據
類組件中context還可以換一個方案來消費,定義好后,就可以通過成員屬性 this.context來獲取數據
方式1:通過組件消費:
由于Consumer的特性,里面的代碼必須是這個函數的返回值。
// 假設現在當前組件是App組件下面的很深的子孫組件 import ctx, { Consumer } from '../../context/appContext' ..... <Consumer>{state => <h3>{state.name}</h3>}</Consumer>
方式2:通過綁定靜成屬性來消費
首先用static 來聲明contextType
static contextType = ctx
這樣在運行是就會獲得一個新的屬性,我們來接收它,這樣consumer就可以完全不再使用了。
const battery = this.context
// 假設現在當前組件是App組件下面的很深的子孫組件 import ctx, { Consumer } from '../../context/appContext' static contextType = ctx const battery = this.context //就可以通過成員屬性 this.context來獲取數據 ..... <h3>{this.context.name}</h3> <h3>{battery.name}</h3>
原文鏈接:https://niuniu.blog.csdn.net/article/details/126981324
相關推薦
- 2023-07-02 Python+streamlit實現輕松創建人事系統_python
- 2022-05-06 input 限制輸入 小數點后兩位
- 2022-10-05 Android開發Activity毛玻璃背景效果_Android
- 2023-02-09 C++存儲鏈接性原理詳解_C 語言
- 2023-02-07 Pytorch中的Broadcasting問題_python
- 2022-07-26 面向對象OOP基礎理解
- 2022-08-25 Python進階Matplotlib庫圖繪制_python
- 2023-07-04 maven打包所有依賴,對外提供sdk.jar
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支