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 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Java基础-day01-基础题

1. 简述java语言,具有哪些特性? (1).java语言是简单的 java语言是和c++语言类似的,其次java中丢弃了c++中一些难理解的特性,比如运算符...

2554
来自专栏闻道于事

JavaWeb(七)Cookie,EL表达式,标准标签库

Cookie Cookie概述 Cookie译为小型文本文件或小甜饼,Web应用程序利用Cookie在客户端缓存服务器端文件。Cookie是以键值对形式存储在客...

2996
来自专栏你不就像风一样

JSOUP如何优秀的下载JPEG等二进制图像

963
来自专栏Golang语言社区

Golang读写文件的几种方式

最近在使用Golang进行文件读写的过程中,遇到几个细节问题导致程序写入数据时有一定脏数据的残留,最后发现是使用os.OpenFile在进行文件操作的时候没有使...

1513
来自专栏小古哥的博客园

读书笔记-JavaScript面向对象编程(三)

第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM   7.3...

3426
来自专栏王磊的博客

javascript数组去重方法汇总

953
来自专栏待你如初见

JavaIO流输入输出流-字节流

FileInputStream fis = new FileInputStream(fileName);

751
来自专栏Golang语言社区

Golang语言--包的概念、导入与可见性

go中包的概念、导入与可见性 ? 包是结构化代码的一种方式:每个程序都由包(通常简称为 pkg)的概念组成,可以使用自身的包或者从其它包中导入内容。 如同其它一...

3505
来自专栏Golang语言社区

GoStub框架二次开发实践

序言 要写出好的测试代码,必须精通相关的测试框架。对于Golang的程序员来说,至少需要掌握下面四个测试框架: GoConvey GoStub GoMock M...

38611
来自专栏刘望舒

Android网络编程(十一)源码解析Retrofit

前言 最近博客的产出确实很少,因为博主我正在写一本Android进阶书籍,两头很难兼顾,但是每个月也得至少发一篇博客。上一篇我们介绍了Retrofit的使用方...

1897

扫码关注云+社区