React元件間傳值及跨元件通訊詳解

2022-09-26 14:01:24

元件間傳值

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>

到此這篇關於React元件間傳值及跨元件通訊詳解的文章就介紹到這了,更多相關React元件間傳值內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React元件間傳值及跨元件通訊詳解

目錄

元件間傳值

props

ref

狀態提升

跨元件通訊

熱門文章