父传子
//父组件
import React, { Component } from 'react'
import Son from '../son/son'
export default class father extends Component {
state = {
msg: '我是父组件的值'
}
render () {
return (
<>
{/* 自定义属性 */}
<Son msg={this.state.msg}></Son>
</>
)
}
}
//子组件
import React, { Component } from 'react'
export default class son extends Component {
render () {
return (
// 用this.props接收
<div>{this.props.msg}</div>
)
}
}
子传父
//子组件
import React, { Component } from 'react'
export default class son extends Component {
state = {
sonmsg: '我是子组件的值'
}
hendlemysonmsg (val) {
// 通过this.props将子组件的值发送到父组件
// myBtn是自定义事件名
this.props.myBtn(val)
}
render () {
return (
<>
{/* 用this.props接收 */}
<div>{this.props.msg}</div>
{/* 子组件当父组件传值类型于vue中的自定义事件 */}
<button onClick={() => this.hendlemysonmsg(this.state.sonmsg)}>子传父</button>
</>
)
}
}
//父组件
import React, { Component } from 'react'
import Son from '../son/son'
export default class father extends Component {
state = {
msg: '我是父组件的值'
}
hendlemyBtn (val) {
console.log(val) //我是子组件的值
}
render () {
return (
<>
{/* 自定义属性 */}
<Son msg={this.state.msg} myBtn={(val) => this.hendlemyBtn(val)}></Son>
</>
)
}
}
跨级组件
单独创建Context.js文件 ，结构出我们需要的Provider(供应方)和Consumer(消费方)
import { createContext } from 'react'
//从createContext中解构出两个组件
const { Provider, Consumer } = createContext()
export { Provider, Consumer }
祖先组件向子孙类组件传值
//这是祖先组件
import React, { Component } from 'react'
//从context.js文件中导入Provider组件
import { Provider } from '../util/context'
import Father from '../father/father'
export default class grandfather extends Component {
state = {
ismsg: '我是祖先组件的值',
num: 1
}
//该函数会传递到子孙类组件中，
//当前val就是孙组件传递过来的值==>99 从而改变祖先组件中的num
handlechannum = (val) => {
this.setState({
num: this.state.num + val
})
}
render () {
return (
{/* Provider包裹根元素(这样Provider就是最大的根元素)
value中可以传单个值，也可以传一个对象包含多个值，
可以传一个函数：在子孙类组件中可以调用这个函数，也可以给这个函数传值，从而改变祖先组件
*/}
<Provider value={{ 'ismsg': this.state.ismsg, "changenum": (val) => this.handlechannum(val), 'num': this.state.num }}>
<Father></Father>
</Provider>
)
}
}
//孙类组件
import React, { Component } from 'react'
import { Consumer } from '../util/context'
export default class son extends Component {
render () {
return (
<Consumer>
{
(data) => {
//在Consumer组件中的回调函数的参数里可以获取Provider组件提供的value
console.log(data)
let { changenum } = data
//data中的数据是响应式的
return (
<>
{/* 我是祖先组件的值 */}
<div>{data.ismsg}</div>
{/* ()=>必须写，不然会死循环 */}
<button onClick={() => changenum(99)}>利用祖先组件传递过来的函数，向祖先组件传值</button>
<div>{data.num}</div>
</>
)
}
}
</Consumer>
)
}
}
