集成redux后,react如何获取子组件的实例

子组件(在connect函数中加入参数forwardRef:true)

import React, { Component } from 'react'
import { Text, View ,FlatList,Image,RefreshControl } from 'react-native';
import styles from "./style";
import { TouchableHighlight } from 'react-native-gesture-handler';
import { connect } from "react-redux";
import { actions as newsAction,getData } from "../../../../redux/modules/newsPage/actions";
import { bindActionCreators } from 'redux';



class Newslist extends Component {


    scrollToTop = ()=>{
        this.refs.flat_list.scrollToOffset({
            offset:0,
            animated:false
        })
    }

   
    render() {
       
        const { news_list} = this.props.data;


        return (
          <View style={styles.box}> 
                <FlatList
                ref="flat_list" 
                data={news_list}
                renderItem={({item})=>{return <Text>{item.name}</Text>)}}
                keyExtractor={item=>item.news_id}         
                />
          </View>  
        )
    }
}

const mapStateToProps = (state)=>{ 
    return {
      data:getData(state)
    }
 }

 const mapDispatchToProps = (dispatch)=>{
    return {
        newsAction:bindActionCreators(newsAction,dispatch)
    }
 }

export default connect(mapStateToProps,mapDispatchToProps,null,{forwardRef:true})(Newslist);

父组件(子组件设置了forwardRef:true之后,父组件就可以通过ref获取到子组件的实例,调用子组件的方法或者获取子组件的数据)

import React, { Component } from 'react'
import {Text} from "react-native";
import SafeAreaViewPlus from "../../components/safeAreaViewPlus";
import global from "../../style";
import NavigationBar from "../../components/navigationBar";
import NewsNav from "./components/newsNav";
import NewsList from "./components/newsList";
import { connect } from "react-redux";
import { actions as newsAction,getData } from "../../redux/modules/newsPage/actions";
import { bindActionCreators } from 'redux';

class NewsPage extends Component {


    selType = ()=>{
      this.refs.child.scrollToTop();
    }

    render() {
        return (
        <SafeAreaViewPlus topColor={global.themeColor}>
            <NavigationBar hide={true}/>
            <NewsNav selType={this.selType}/>
            <NewsList ref="child"/>
        </SafeAreaViewPlus>
        )
    }
}


const mapStateToProps = (state)=>{ 
    return {
      data:getData(state)
    }
 }

 const mapDispatchToProps = (dispatch)=>{
    return {
        newsAction:bindActionCreators(newsAction,dispatch)
    }
 }

export default connect(mapStateToProps,mapDispatchToProps)(NewsPage);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值