加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react native中封装别的插件,在父组件中调用子组件的ref

发布时间:2020-12-15 20:22:03 所属栏目:百科 来源:网络整理
导读:话不多说,直接上代码: 父组件中: import MyToast from ‘../../myToast‘ ; MyToast onRef={toast = this .toast = toast} position="center" / 子组件中: import React from ‘react‘ ;import Toast from ‘react-native-easy-toast‘ ;import { Style

话不多说,直接上代码:

父组件中:

import MyToast from ‘../../myToast‘;

<MyToast onRef={toast => this.toast = toast} position="center" />

子组件中:

import React from ‘react‘;
import Toast from ‘react-native-easy-toast‘;
import {
    StyleSheet,} from ‘react-native‘;

export default class MyToast extends React.Component {
    componentDidMount() {
        const { onRef } = this.props;
        if (typeof onRef === ‘function‘) onRef(this.toast);
    }
    render() {
        return (
            <Toast
                {...this.props}
                ref={toast => this.toast = toast}
                style={styles.toastStyle}
                textStyle={{color: ‘#4A90E2‘}}/>
        );
    }
}

const styles = StyleSheet.create({
    toastStyle: {
        backgroundColor: ‘#FFFFFF‘,}
});

道理就是通过onRef方法,采用回调的方式,让父组件得到子组件里Toast的ref。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读