前言
在React的世界里镀脂，界面是由一個(gè)個(gè)Component拼出來的朽缎。當(dāng)我們需要渲染一個(gè)界面時(shí)沃缘，以<View>為父控件舅锄。<Text>或自定義的<CustomText>為子控件鞭达。在渲染時(shí)，我們一定希望對(duì)子控件傳遞一些參數(shù)皇忿。props就可以讓我們?cè)诳丶谐氩洌@取來自父控件的參數(shù)。
一個(gè)例子
現(xiàn)在我們嘗試實(shí)現(xiàn)一個(gè)讓字符串反轉(zhuǎn)的<Text>鳍烁。
import React, { Component } from 'react';
import {
Text,
} from 'react-native';
class ReverseText extends Component {
render(){
// 獲取上層傳入的 text
var srcStr = this.props.text;
// 反轉(zhuǎn)字符串
var reverseStr = srcStr.split("").reverse().join("");
// 返回渲染結(jié)果
return <Text>{reverseStr}</Text>
}
}
// 輸出控件
export default ReverseText;
我們自行實(shí)現(xiàn)了一個(gè)讓字符串反轉(zhuǎn)的類叨襟。可以看到幔荒，在render方法的第一行糊闽，我們就通過props從上層取到了需要反轉(zhuǎn)的字符串。這個(gè)結(jié)構(gòu)清晰易懂爹梁，不再贅述右犹。
接下來我們看一看，外層如何調(diào)用這個(gè)ReverseText姚垃。
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import ReverseText from '../AwesomeProject/App/widget/ReverseText'
class HelloWorld extends Component {
render(){
return (
<ReverseText text='Where must we fly'></ReverseText>
)
}
}
AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);
可以看到念链，我們?cè)谕鈱右肓薘everseText。
然后通過<ReverseText text='Where must we fly'></ReverseText>將需要反轉(zhuǎn)字符串輸入其中积糯。
結(jié)果
image.png
如有問題钓账，歡迎指正。
