快捷導(dǎo)航

詳解react組件通訊方式(多種)

更新時間：2020年05月06日 09:26:35 作者：ToSmile

這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、父組件向子組件傳值

父組件向子組件傳值一般采用props屬性傳遞

父組件：

import React from 'react'
import Child from './Child'

const dataList = [
 { id: '001', value: '張三' },
 { id: '002', value: '李四' }
]

const Parent = props => {
 return (
  <ul>
   <Child dataList={dataList}></Child>
  </ul>
 )
}

export default Parent

子組件：

import React from 'react'

const Child = props => {
 return (
  <React.Fragment>
   {
    props.dataList.map(item => <li key={item.id}>{item.value}</li>)
   }
  </React.Fragment>
 )
}

export default Child

2、子組件向父組件傳值

子組件調(diào)用父組件傳過來的回調(diào)函數(shù)來更改父組件的state

父組件

import React, { useState } from 'react'
import Child from './Child'

const Parent = props => {
 const [count, setCount] = useState(0)

 return (
  <Child count={count} setCount={setCount}></Child>
 )
}

export default Parent

子組件

import React from 'react'

const Child = props => {
 return (
  <React.Fragment>
   <button onClick={() => {props.setCount(props.count-1)}}>-</button>
   <span>{props.count}</span>
   <button onClick={() => {props.setCount(props.count+1)}}>+</button>
  </React.Fragment>
 )
}

export default Child

3、跨級組件傳值（祖孫組件）

context是一個全局變量,像是一個大容器,在任何地方都可以訪問到,我們可以把要通信的信息放在context上,然后在其他組件中可以隨意取到;
但是React官方不建議使用大量context,盡管他可以減少逐層傳遞,但是當(dāng)組件結(jié)構(gòu)復(fù)雜的時候,我們并不知道context是從哪里傳過來的;而且context是一個全局變量,全局變量正是導(dǎo)致應(yīng)用走向混亂的罪魁禍?zhǔn)?

父組件

import React, { useState } from 'react'
import Child from './Child'

export const MyContext = React.createContext('hello')

const Parent = props => {
 return (
  <MyContext.Provider value="world">
   <Child />
  </MyContext.Provider>
 )
}

export default Parent

子組件

import React from 'react'
import Son from './Son'

const Child = props => {
 return (
  <Son />
 )
}

export default Child

孫組件

import React from 'react'
import { MyContext } from './Parent'

export default class Son extends React.Component {
 render() {
  return (
   <MyContext.Consumer>
    {
     context => <div>{context}</div>
    }
   </MyContext.Consumer>
  )
 }
}