In react-native how can I use refs get the multi level component

Question

in the componentDidMount function I can use this.refs['test'] get this component, but use this.refs['list'] will get a error. I try use 'ref={list=> { this.list = list}' to add a ref for the component, and use 'this.list' to get the component, and It's also a error. So who can I get the component.

return(
  <View style={MainStyles.body}>
    <TopView selectAll={() => this._selectAll()} />
    <TabView ref={(ref) => this.tabView = ref}
      switchTab={(index) => this._switchTab(index)}/>
    <MyListView style={MainStyles.listView}
      ref='test'
      refresh={(okCall, failCall) => this._refresh(this, okCall, failCall)}
      loadMore={(okCall,failCall) => this._loadMore(this, okCall, failCall)}
      />
    <PageView style={MainStyles.content}
      ref={viewPager => { this.viewPager = PageViewWrapper(viewPager)}}
      onPageSelected={(e) => this._onPageSelected(e, this)}
      >
      <MyListView style={MainStyles.listView}
        ref='list'
        refresh={(okCall, failCall) => this._refresh(this, okCall, failCall)}
        loadMore={(okCall,failCall) => this._loadMore(this, okCall, failCall)}
        />
      <MyListView style={MainStyles.listView}
        ref={(ref) => this.myList1 = ref}
        refresh={(okCall, failCall) => this._refresh(this, okCall, failCall)}
        loadMore={(okCall,failCall) => this._loadMore(this, okCall, failCall)}
        />
    </PageView>
 </View>
)

Ashok R · Answer 1 · 2016-07-01T13:52:16.610

Can you try like this this.refs.test or this.refs.list

Check below code it perfectly works for me.

class sample extends Component {

componentDidMount() {
  console.log(this.refs.mainView);
  console.log(this.refs.welcomeText);
  console.log(this.refs.startedText);
  console.log(this.refs.secondView);
  console.log(this.refs.runText);
  console.log(this.refs.thirdView);
}

  render() {
   return (
     <View ref='mainView' style={styles.container}>
       <Text ref='welcomeText' style={styles.welcome}>
         Welcome to React Native!
       </Text>
       <Text ref='startedText' style={styles.instructions}>
        To get started, edit index.ios.js
       </Text>
       <View ref='secondView'>
         <Text ref='runText' style={styles.instructions}>
           Press Cmd+R to reload,{'\n'}
           Cmd+D or shake for dev menu
         </Text>
       </View>
       <View ref='thirdView' />
     </View>
   );
 }
}

In react-native how can I use refs get the multi level component

1 Answers1