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、子元件向父元件傳值

子元件呼叫父元件傳過來的回撥函式來更改父元件的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,儘管他可以減少逐層傳遞,但是當元件結構複雜的時候,我們並不知道context是從哪裡傳過來的;而且context是一個全域性變數,全域性變數正是導致應用走向混亂的罪魁禍首.

父元件

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>
  )
 }
}

參考：
https://blog.csdn.net/xingfuzhijianxia/article/details/86151243
https://www.cnblogs.com/qinney1109/p/11202085.html

到此這篇關於詳解react元件通訊方式的文章就介紹到這了,更多相關react元件通訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！