溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了react組件通訊的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
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>
)
}
}
看完上述內容，是不是對react組件通訊的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
