react组件通信

目录

父子组件

父传子props

子传父：回调函数作为props的值传给子组件，形参接受数据

跨组件通信Context API

context.provider/consumer

避免 props 层层传递：context

滥用：依赖关系混乱、难扩展、测试

---

父子组件

父传子props

子传父：回调函数作为props的值传给子组件，形参接受数据

1、父组件提供一个回调函数（其参数用于接受数据）
2、将函数作为属性的值，利用props，传递给子组件
3、子组件通过props获取到父组件传递过来的西数，并旦地调用这个函数。
4、将子组件中想要传递给父组件的数据，作为参数传递给这个函数。

//父组件
import Child from '../Child/index'

const Parent = () => {

    const onClick = (value) => {
        console.log('子组件传来了',value)
    }
    return(
            
    )
}

export default Parent

//子组件
const Child = (props) => {
    const handleClick = (value) => {
        props.click(value)
    }
    return(
        
{handleClick(1)}}> 
    )
}

export default Child

跨组件通信Context API

context.provider/consumer

Welcome传递给Title：

let MyContext = React.createContext();

class Welcome extends React.Component {
    state = {
        msg: 'welcome组件的数据'
    }
    render(){
        return (
            

                Hello Welcome

                
                    
                

            
        );
    }
}
class Head extends React.Component {
    render(){
        return (
            

                Hello Head