快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

react中子组件是什么意思-创新互联

这篇文章将为大家详细讲解有关react中子组件是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专注于成都网站设计、做网站、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。

在react中,将某段代码封装成一个组件,而这个组件又在另一个组件中引入,那么引入该封装的组件的文件叫做父组件,被引入的组件就叫做子组件。

有时候我们经常分不清什么是父组件,什么又是子组件。现在来简单说下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件。

react中直接调用子组件的方法(非props方式)

我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的。

显而易见,这个执行是需要去主动触发的。

那有没有一种方式,方法在子组件定义好,可以直接在父组件去调用呢?

答案是必然的。

上代码

import React, {Component} from "react";
import { Button } from "antd";
//父组件
export default class Parent extends Component {
    render() {
        return(
            
          

这是父组件

                                 click             
        )     }     bindRef = ref => { this.child = ref }     btnClick = () => {         this.child.getValuefromChild()     } } //子组件 class Child extends Component {     componentDidMount(){         this.props.triggerRef(this)     }   //这是子组件的方法     getValuefromChild = () => console.log("this is child value.")     render() {         return 
这是子组件
    } }

关于react中子组件是什么意思就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前题目:react中子组件是什么意思-创新互联
网页网址:http://6mz.cn/article/djheoo.html

其他资讯