React Native的props

前言

在React的世界里,界面是由一个个Component拼出来的。当我们需要渲染一个界面时,以<View>为父控件。<Text>或自定义的<CustomText>为子控件。在渲染时,我们一定希望对子控件传递一些参数。props就可以让我们在控件中,获取来自父控件的参数。

一个例子

现在我们尝试实现一个让字符串反转的<Text>。

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

class ReverseText extends Component {

  render(){
    // 获取上层传入的 text
    var srcStr = this.props.text; 
    // 反转字符串
    var reverseStr = srcStr.split("").reverse().join("");
    // 返回渲染结果
    return <Text>{reverseStr}</Text>
  }
}

// 输出控件
export default ReverseText;

我们自行实现了一个让字符串反转的类。可以看到,在render方法的第一行,我们就通过props从上层取到了需要反转的字符串。这个结构清晰易懂,不再赘述。

接下来我们看一看,外层如何调用这个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);

可以看到,我们在外层引入了ReverseText。 然后通过<ReverseText text='Where must we fly'></ReverseText>将需要反转字符串输入其中。

结果

image.png

如有问题,欢迎指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

一、条件渲染 1.1、v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if...

52511
来自专栏源码之家

EXCEL取消合并且等于原合并值

1614
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  &lt;= CURRENT_DATE AND end_date &...

1301
来自专栏我的博客

jade模板学习

1、Jade中,空格、换行、缩进都是有意义的,由这些决定了标签和内容的嵌套关系。 2、jade模板中不需要结束标签,它用缩进表示标签间的嵌入关系。 3、span...

3444
来自专栏bboysoul

markdown简明指南

介绍:markdown是一种用来写作的标记语言,他用简单的语法来代替排版使我们注重文章的内容而不是排版

903
来自专栏HTML5学堂

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到...

5008
来自专栏柠檬先生

Angularjs基础(十)

ng-blur  描述:规定blur 事件的行为       实例:当输入框失去焦点的(onblur)时执行表达式:         <input ng...

2045
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

4947
来自专栏Golang语言社区

Go语言的标准输入-scan 和bufio

除了f mt 和 os ,我们还需要用到 bufio 来实现带缓冲输入(input)和输出(output)读取用户的输入数据 我们怎样读取用户从键盘(控制台)输...

52211
来自专栏十月梦想

Vue入门详解之模板语法插值表达式,v-html和v-text

我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那...

4813

扫码关注云+社区

领取腾讯云代金券