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

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5317
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6798
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2152
来自专栏杨龙飞前端

scrollto 到指定位置

2494
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2707
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5456

扫码关注云+社区