react 组件通讯的三种方式

Posted 2021-12-23 冰雪奇缘lb

父组件传递数据给子组件

1. 父组件提供要传递的 state 数据
2. 给子组件标签添加属性，值为 state 中的数据
3. 子组件中通过 props 接收父组件中传递的数据
   

class Parent extends React.Component 
    state = 
        lastName: '王'
    
    render() 
        return(
            <div style=background:'red', padding:'20px'>
                父组件：
                <Child name=this.state.lastName />
            </div>
        )
    


const Child = (props) => 
    return(
        <div style=background:'yellow', height:'200px'>
            <p>子组件，接收到父组件的数据：props.name</p>
        </div>
    )


// 渲染组件
ReactDOM.render(<Parent />, document.getElementById("root"))

---

子组件传递数据给父组件

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

1. 父组件提供一个回调函数(用于接收数据）
2. 将该函数作为属性的值，传递给子组件
   
3. 子组件通过 props 调用回调函数
4. 将子组件的数据作为参数传递给回调函数
   

// 父组件
class Parent extends React.Component 
    state = 
        parentMsg: ''
    
    // 提供回调函数，用来接收数据
    getChildMsg = (data) => 
        console.log('接收到子组件传递过来的数据：', data);
        this.setState(
            parentMsg: data
        )
    
    render() 
        return(
            <div style=background:'red', padding:'20px'>
                父组件：this.state.parentMsg
                <Child getMsg=this.getChildMsg />
            </div>
        )
    


// 子组件
class Child extends React.Component 
    state = 
        msg: '我是从子组件传递来的值'
    
    handleClick = () => 
        // 子组件调用父组件传递过来的回调函数
        this.props.getMsg(this.state.msg)
    
    render() 
        return(
            <div style=background:'yellow', height:'200px'>
                <p>子组件</p>
                <button onClick=this.handleClick>点我，给父组件传递数据</button>
            </div>
        )
    
    


// 渲染组件
ReactDOM.render(<Parent />, document.getElementById("root"))

---

兄弟组件

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
• 思想∶状态提升
• 公共父组件职责:1. 提供共享状态 2. 提供操作共享状态的方法
• 要通讯的子组件只需通过 props 接收状态或操作状态的方法
  

// 父组件
class Counter extends React.Component 
    // 提供共享状态
    state = 
        count: 0
    

    // 提供修改状态的方法
    onIncrement = () => 
        this.setState(
            count: this.state.count + 1
        )
    

    render() 
        return(
            <div>
                <Child1 count=this.state.count />
                <Child2 onIncrement=this.onIncrement />
            </div>
        )
    


const Child1 = (props) => 
    return (
        <h1>计数器：props.count</h1>
    )


const Child2 = (props) => 
    return (
        <button onClick=props.onIncrement>+1</button>
    )


// 渲染组件
ReactDOM.render(<Counter />, document.getElementById("root"))