亚博国际网页登录:详解react组件通讯方式(多种)

这篇文章主要先容了详解react组件通讯要领,文中经由过程示例代码先容的异常具体,对大年夜家的进修或者事情具有必然的参考进修代价,必要的同伙们下面跟着小编来一路进修进修吧1、父组件向子组件传值父组件向子组件传值一样平常采纳props属性通报父组件:




这篇文章主要先容了详解react组件通讯要领,文中经由过程示例代码先容的异常具体,对大年夜家的进修或者事情具有必然的参考进修代价,必要的同伙们下面跟着小编来一路进修进修吧

1、父组件向子组件传值

父组件向子组件传值一样平常采纳props属性通报

父组件:

import React from 'react'

import Child from './Child'

const dataList = [

{ id: '001', value: '张三' },

{ id: '002', value: '李四' }

]

const Parent = props => {

return (

)

}

export default Parent

子组件:

import React from 'react'

const Child = props => {

return (

{

props.dataList.map(item => {item.value})

}

)

}

export default Child

2、子组件向父组件传值

子组件调用父组件传过来的回调函数来变动父组件的state

父组件

import React, { useState } from 'reac亚博国际网页登录t'

import Child from './Child'

const Parent = props => {

const [count, setCount] = useState(0)

return (

)

}

export default Parent

子组件

import React from 'react'

const Child = props => {

return (

{props.setCount(props.count-1)}}>-

{props.count}

{props.setCount(props.count+1)}}>+

)

}

export default Child

3、跨级组件传值(祖孙组件)

context是一个全局变量,像是一个大年夜容器,在任何地方都可以造访到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;

然则React官方不建议应用大年夜量context,只管他可以削减逐层通报,然则当组件布局繁杂的时刻,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量恰是导致利用走向纷乱的祸首罪魁.

父组件

import React, { useState } from 'react'

import Ch亚博国际网页登录ild from './亚博国际网页登录Child'

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

const Parent = props => {

return (

)

}

export defaul亚博国际网页登录t Parent

子组件

import React from 亚博国际网页登录'react'

import Son from './Son'

const Child = props => {

return (

)

}

export default Child

孙组件

import React from 'react'

import { MyContext } from './Parent'

export default class Son extends React.Component {

render() {

return (

{

context =>

{context}

}

)

}

}

参考:

到此这篇关于详解react组件通讯要领的文章就先容到这了,更多相关react组件通讯内容请搜索各人自学网曩昔的文章或继承浏览下面的相关文章盼望大年夜家今后多多支持各人自学网!

发表评论
加载中...

相关文章