1. 程式人生 > >RN中子元件和父元件之間的資料傳遞問題

RN中子元件和父元件之間的資料傳遞問題

使用RN做專案已經有兩個月了,雖然現在大部分情況下已經使用了Redux,進行狀態的管理和資料的處理,後續會說一下自己是如何使用Redux的,現在先說一下在RN中一個關鍵的資料傳遞問題,雖然後續可能專案中添加了Redux架構,但也不代表這每個頁面都去使用,畢竟為了一個簡單的資料,需要一堆操作,也挺麻煩的。

1 父元件傳遞給子元件資料

這個是比較簡單,也是比較常見的。
比如:官網上props這一節中的這個例子

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native'
; class Greeting extends Component { render() { return ( <Text>Hello {this.props.name}!</Text> ); } } class LotsOfGreetings extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> <Greeting name='Jaina'
/> <Greeting name='Valeera' /> </View> ); } } AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

我們發現類Greeting 是子元件,它在使用父元件LotsOfGreetings 裡面的資料的時候,會填寫屬性name=’XXX’,父元件中這樣寫,子元件就可以利用this.props.name去使用這個資料,所以以後在想從父元件向子元件傳遞資料的時候,就可以利用這種方式。

2 子元件向父元件傳遞資料

這種是大家遇到比較多,且會迷茫的地方,其實原理差不多,也很簡單。
還拿上面的情況來說,我稍加改造一下:

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

class Greeting extends Component {
_onPressButton(){
this.props.callback("hello wrold");
}
  render() {
    return (
    <TouchableHighlight onPress={this._onPressButton.bind(this)}>
      <Text>Hello {this.props.name}!</Text>
      </TouchableHighlight >
    );
  }
}

class LotsOfGreetings extends Component {
_onPressButton(str){
str....
}
  render() {
    return (
      <View style={{alignItems: 'center'}} callback={this._onPressButton.bind(this)}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

上面是直接props傳遞了資料,這次我利用props傳遞方法,然後使用方法來回調資料,這種方式,如果對state和props熟悉的應該比較容易看懂,子元件執行了父元件的方法,同時會把子元件的資料傳遞過去,這樣父元件中的方法就可以使用子元件的資料。

後續我會再說一下,沒有關係的元件之間是如何傳遞資料的,其實更簡單,就跟Android裡面的監聽是一樣,使用監聽的方式,接收資料,並執行自己的操作即可。

相關推薦

no