快捷導(dǎo)航

React組件間傳值及跨組件通信詳解

更新時(shí)間：2022年09月24日 09:21:00 作者：勇敢*牛牛

這篇文章主要介紹了React組件間傳值及跨組件通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

組件間傳值

props

父?jìng)髯樱和ㄟ^(guò)自定義屬性向子組件傳值，值可以是任何類型

子傳父：通過(guò)父組件把方法傳給子組件，子組件調(diào)用傳過(guò)去的方法完成傳值

注：

1.定義方法時(shí)盡可能的去使用箭頭函數(shù)定義

2.調(diào)用時(shí)，盡可能的寫小括號(hào)

父組件中的方法
// 成員方法 箭頭函數(shù)來(lái)定義，這樣就沒(méi)有this指向問(wèn)題
setNum = (n = 1) => this.setState(state => ({ num: state.num + n }))
<Child num={num} setNum={this.setNum} />

子組件中
<button onClick={() => setNum(2)}>+++++</button>
子去修改父?jìng)鬟^(guò)來(lái)的數(shù)據(jù),props它是單向數(shù)據(jù)流，子不能直接去修改

ref

父子間傳值：通過(guò)ref引用對(duì)象完成對(duì)于【類組件】之間通信
this.childRef.current 得到當(dāng)前Child組件的實(shí)例對(duì)象

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)

狀態(tài)提升

此方案用來(lái)解決兄弟組件間的傳值問(wèn)題，就是把共用的狀態(tài)信息提升到父組件狀態(tài)中。

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實(shí)現(xiàn)在跨組件通信，一般用于自定義組件

context一個(gè)項(xiàng)目中可以有N個(gè),但是一般情況下我們使用它，都是把它放在App組件中，一個(gè)項(xiàng)目一個(gè)。
因?yàn)镃ontext會(huì)讓組件變得不純粹，因?yàn)橐蕾嚵巳肿兞俊Ｋ赃@決定了Context一般不會(huì)大規(guī)模的使用。所以一般在一個(gè)組件中使用一個(gè)Context就好。
context實(shí)現(xiàn)在跨組件通信，一般用于自定義組件所用
context綁定消費(fèi)是一定是一個(gè)對(duì)象

import { createConext } from 'react'
const ctx = createContext()
const { Provider, Consumer } = ctx
export {
	ctx as default,
	Provider,
	Consumer
}

Provider,Consumer 都是組件
Provider 生產(chǎn)數(shù)據(jù)的組件
Consumer 消費(fèi)的組件

導(dǎo)入

在App組件中生產(chǎn)數(shù)據(jù)，這樣下面的子孫組件就可以調(diào)用此context對(duì)象來(lái)消費(fèi)數(shù)據(jù)，value屬性就是生產(chǎn)的數(shù)據(jù)源

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屬性就是生產(chǎn)的數(shù)據(jù)源 */}
               <Provider value={this.state}>
                   <Child />
               </Provider>
           </div>
       );
   }
}

child.jsx文件

兩種方法來(lái)消費(fèi)（獲?。?shù)據(jù)

類組件中context還可以換一個(gè)方案來(lái)消費(fèi),定義好后，就可以通過(guò)成員屬性 this.context來(lái)獲取數(shù)據(jù)

方式1：通過(guò)組件消費(fèi):

由于Consumer的特性，里面的代碼必須是這個(gè)函數(shù)的返回值。

// 假設(shè)現(xiàn)在當(dāng)前組件是App組件下面的很深的子孫組件
import ctx, { Consumer } from '../../context/appContext'
.....
<Consumer>{state => <h3>{state.name}</h3>}</Consumer>

方式2：通過(guò)綁定靜成屬性來(lái)消費(fèi)

首先用static 來(lái)聲明contextType

static contextType = ctx

這樣在運(yùn)行是就會(huì)獲得一個(gè)新的屬性，我們來(lái)接收它，這樣consumer就可以完全不再使用了。

const battery = this.context

// 假設(shè)現(xiàn)在當(dāng)前組件是App組件下面的很深的子孫組件
import ctx, { Consumer } from '../../context/appContext'
static contextType = ctx
const battery = this.context
//就可以通過(guò)成員屬性 this.context來(lái)獲取數(shù)據(jù)
.....
<h3>{this.context.name}</h3>
<h3>{battery.name}</h3>

到此這篇關(guān)于React組件間傳值及跨組件通信詳解的文章就介紹到這了,更多相關(guān)React組件間傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: