react在父组件中调用子组件内的方法

御风傲天

于 2019-11-05 11:27:03 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签：父组件调用子组件方法

本文链接：https://blog.youkuaiyun.com/yufengaotian/article/details/102912593

react 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用React Native实现的简单示例，展示了如何通过引用传递和回调函数实现父组件与子组件之间的通信。父组件通过onRef方法接收子组件的引用，并在点击事件中调用子组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, {Component} from 'react';
import {Text, View,  TouchableOpacity} from 'react-native';

export default class Parent extends Component {
    render() {
        return(
            <View>
                <Child onRef={this.onRef} />
                <TouchableOpacity onClick={this.click} >
                <Text>click</Text>
            </View>
        )
    }
    // 标记触发的子组件
    onRef = (ref) => {
        this.child = ref
    }
    // 调用子组件方法
    click = (e) => {
        this.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
        // 父级标记
        this.props.onRef(this)
    }
    // 子组件方法
     myName = () =>{
      console.log(11111111111111)
  
     }

    render() {
        return (<View></View>)
    }
}