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

相关文章

来自专栏偏前端工程师的驿站

JS魔法堂:元素克隆、剪切技术研究

一、前言                                     当需要新元素时我们可以通过 document.createElement 接口...

1735
来自专栏软件开发

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

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

49911
来自专栏流浪猫的golang

golang slice 与list 的性能分析。

本机运行结果: 声明:测试结果为个人电脑的测试结果,仅供参考。 slice 创建速度:1.3029245s list 创建速度: 9.7489181...

951
来自专栏天天

微信小程序 页面与自定义组件数据通信

说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

3375
来自专栏python学习指南

Python爬虫(十二)_XPath与lxml类库

Python学习指南 有同学说,我正则用的不好,处理HTML文档很累,有没有其他的方法? 有!那就是XPath,我们可以用先将HTML文档转换成XML文...

29610
来自专栏与神兽党一起成长

unslider源码分析

根据Bootstrap中文网的介绍,Unslider一个超小的 jQuery轮播(slider)插件,参照这个汉化版的介绍页面,这个插件有你需要的优点,但是本...

1461
来自专栏微信公众号:Java团长

Java实现验证码功能实例

Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢?

1332
来自专栏进击的君君的前端之路

Vue成神之路之内部指令

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

885
来自专栏Golang语言社区

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

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

4247
来自专栏Golang语言社区

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

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

48111

扫码关注云+社区