React父子组件传递事件 - Kaiqisan

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩，今天讲讲组件传值

个人觉得React里面的父子组件之间的传递事件比Vue里面的要稍微简单一点

子组件触发父组件方法

/* 父组件 */
import React, {Fragment} from 'react'
// import { Link } from 'react-router-dom'

import Demo1 from '../../components/Demo1/index'

export default class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return <Fragment>
            <p>主页</p>
            <Demo1 getData={this.getData} /> {/* 传值，直接传方法名，前面的getData是命名赋值部分，后面的this.getData是获取参数部分 */}
        </Fragment>
    }

    getData() {
        console.log('ok');
    }
}

/* 子组件 */
import React from 'react'

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return <div>
            <button onClick={() => {
                this.props.getData() 
                // 传递的值在props里面，直接拿来调用，使用箭头函数是为了让this可以正常在函数里使用
            }}>点击
            </button>
        </div>
    }
}

执行效果

每点击一次按钮就会触发一次 ‘ok’ 输出

在传递的过程中也可以传参，带入子组件的参数，就可以实现子组件参数向父组件传递

/* 子组件 */
import React from 'react'

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 10
        }
    }

    render() {
        return <div>
            <button onClick={() => {
                this.props.getData(this.state.num) 
                // 传递的值在props里面，直接拿来调用，使用箭头函数是为了让this可以正常在函数里使用
            }}>点击
            </button>
        </div>
    }
}

/* 父组件 */
import React, {Fragment} from 'react'
// import { Link } from 'react-router-dom'

import Demo1 from '../../components/Demo1/index'

export default class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return <Fragment>
            <p>主页</p>
            <Demo1 getData={this.getData} /> {/* 传值，直接传方法名，前面的getData是命名赋值部分，后面的this.getData是获取参数部分 */}
        </Fragment>
    }

    getData(num) { // 拿参数来接收
        console.log(num); 
    }
}

执行效果

每点击一次按钮就会触发一次 输出 10

父组件触发子组件方法

可能会有点绕，但是记住，这个逻辑过程都是基于子组件传参给父组件

/* 父组件 */

import React, {Fragment} from 'react'

import Demo1 from '../../components/Demo1/index'

export default class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return <Fragment>
            <p>主页</p>
        	{/* 这两行重点 */}
            <Demo1 onRef={(ref)=>{this.child = ref}} />
            <button onClick={() => {this.child.getNum()}}>点击</button>
        </Fragment>
    }
}

/* 子组件 */

import React from 'react'

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 0
        }
    }

    componentDidMount() {
        this.props.onRef(this)
    }

    render() {
        return <div>
            ddd
        </div>
    }
     
    // 待调用的方法
    getNum() {
        console.log('ok')
    }

}

实现效果

每次点击都在控制栏弹出一个 ‘ok’

原理

首先，所有的元素，包含父组件和子组件被挂载到DOM树，然后父组件开始向子组件传值，

onRef={(ref)=>{this.child = ref}}，onRef是个函数，里面的内容就是传给子组件的方法，

然后子组件挂载，执行componentDidMount，里面有onRef，就开始执行这个方法，其实这一步是父组件传方法给子组件，然后子组件触发父组件方法，

接下来，看这个 this.props.onRef(this)这个this就是子组件的所有的信息，包含参数和方法。

下一步，咱回到父组件，这个ref就是子组件传过来的this,也就是所有的子组件的信息，然后赋值给child,也就是父组件的一个参数

接着，点击按钮，触发 this.child.getNum(),直接调用子组件的方法

• PS:同理，在方法触发的时候父组件也可以带参数给子组件，实现更充分的传递

总结

框架的核心知识点，需要知悉。开头虽说简单，但其实仔细康康还是有一点绕的。