教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

什么是組件通訊?組件通訊的三種方式

更新時間:2023年09月28日16時15分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

組件是獨立且封閉的單元,默認情況下,只能使用組件自己的數(shù)據(jù)。在組件化過程中,我們將一個完整的功能拆分成多個組件,以更好的完成整個應(yīng)用的功能。而在這個過程中,多個組件之間不可避免的要共享某些數(shù)據(jù)。為了實現(xiàn)這些功能,就需要打破組件的獨立封閉性,讓其與外界溝通。這個過程就是組件通訊。組件通訊是構(gòu)建 React 應(yīng)用必不可少的一環(huán)。

組件是封閉的,組件之間的通訊有3種方式,分別是父組件到子組件,子組件到父組件和兄弟組件之間的通訊,下面分別看它們的用法。

1.組件傳遞數(shù)據(jù)給子組件

父組件提供要傳遞的state數(shù)據(jù),給子組件標簽添加屬性,值為 state 中的數(shù)據(jù),子組件中通過 props 接收父組件中傳遞的數(shù)據(jù)。

class Parent extends React.Component {
  state = { lastName: '王' }
  render() {
    return   (
      <div>
        傳遞數(shù)據(jù)給子組件:<Child name={this.state.lastName} />
      </div>
    )
  }
}
function Child(props) {
  return <div>子組件接收到數(shù)據(jù):{props.name}</div>
}

2.子組件傳遞數(shù)據(jù)給父組件

利用回調(diào)函數(shù),父組件提供回調(diào),子組件調(diào)用,將要傳遞的數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)。
我們需要先利用父組件提供一個回調(diào)函數(shù)(用于接收數(shù)據(jù)),再將該函數(shù)作為屬性的值,傳遞給子組件,示例代碼如下:

class Parent extends React.Component {
  getChildMsg = (msg) => {
    console.log('接收到子組件數(shù)據(jù)', msg)
  }
  render() {
    return (
      <div>
        子組件:<Child getMsg={this.getChildMsg} />
      </div>
   )
  }
}

子組件通過 props 調(diào)用回調(diào)函數(shù),將子組件的數(shù)據(jù)作為參數(shù)傳遞給回調(diào)函數(shù)。

class Child extends React.Component {
  state = { childMsg: 'React' } 
  handleClick = () => {
    this.props.getMsg(this.state.childMsg)
  }
  return (
    <button onClick={this.handleClick}>點我,給父組件傳遞數(shù)據(jù)</button>
  )
}

注意:回調(diào)函數(shù)中 this 指向問題!

3.兄弟組件

將共享狀態(tài)提升到最近的公共父組件中,由公共父組件管理這個狀態(tài)其中公共父組件職責是提供共享狀態(tài)和操作共享狀態(tài)的方法。要通訊的子組件只需通過 props 接收狀態(tài)或操作狀態(tài)的方法。

1695888403683_兄弟組件.jpg

0 分享到:
和我們在線交談!