react父组件调用子组件的方法父子组件传值

最新推荐文章于 2024-08-21 18:23:58 发布

羽公子

最新推荐文章于 2024-08-21 18:23:58 发布

阅读量6.1k

点赞数 1

分类专栏：笔记文章标签： React

本文链接：https://blog.csdn.net/qq_35333936/article/details/88038567

版权

本文探讨了在React中如何实现父组件调用子组件的方法以及父子组件之间的值传递。关键点在于，子组件调用父组件的方法需要确保方法为箭头函数以正确设置`this`的指向，或者使用`this.fn.bind(this)`。父组件通过属性将值和方法传递给子组件，而子组件则通过事件来向父组件传递值。

摘要由CSDN通过智能技术生成

注意点写在上边比较醒目

方法必须写成箭头函数，不然this的指向会出问题。
（不用箭头函数的话要用this.fn.bind(this)修正this的指向）
父组件向子组件传值/方法比较简单，都是在属性中传然后在子组件中props获取。
子组件向父组件传值是通过事件进行传值。

父组件向子组件传值

//父组件中
import React, {
    Component } from "react";
import Child from "./Child";

class Dad extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            arr:["暴富","暴瘦"],
        }
    }

    render() {
   
        return (
            <div>
            //写在子组件的属性中
                <Child arr={
   this.state.arr}></Child>
            </div>
        )
    }
}

export default Dad;

//子组件中
import React, {
    Component } from "react";

class Child extends Component {
   
    constructor(props){
   
        super(props);
    }

    render() {
   
        return (
           <div>
               <ul>
                   {
   
                       //再用props获取
                       this.props.arr.map(el=>{