大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native'; class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
} AppRegistry.registerComponent('Bananas', () => Bananas);

请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native'; class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
} class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
} AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
 

Props属性的更多相关文章

  1. React(六)Props属性

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  2. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  3. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  4. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  5. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  6. 组件的props属性和state状态

    props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Prof ...

  7. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  8. 组件通过props属性传值

    组件之间的传值 组件是一个单独功能模块的封装,有属于自己的data和methods,一个组件的 data 选项必须是一个函数 为什么必须是函数:因为只有当data是函数时,不同实例调用同一个组件时才会 ...

  9. React 之props属性

    React 里有一个非常常用的模式就是对组件做一层抽象.组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现. 可以使用 JSX 展开属性 来合并现有的 props 和其 ...

随机推荐

  1. 一个简易的dota改键助手

    那年,刚开始玩dota的时候, 发现物品栏的快捷键太不好按鸟(集中在小键盘的数字键).于是各种改键工具应运而生,像最经典的warkey, 不知不觉就用了好多年.如今,各种改键工具越来越强大了, 支持各 ...

  2. FTP上传

    package cn.zto.util; import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileIn ...

  3. Linux下安装APache

    1:在图形界面下下载apache 安装包,我下的是 httpd-2.2.9.tar.gz 源码安装包,地址是http://httpd.apache.org/download.cgi 2:用:gzip ...

  4. bzoj2424 [HAOI2010]订货

    模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...

  5. jQuery与其他JS库冲突解决

    实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...

  6. uber 真是垃圾

    uber司机好几次都不认识路,态度也不好,最开始使用是因为它价格最便宜,随着滴滴/快的价格下调,已经没有再使用uber的必要,果断卸载.

  7. spring多线程与定时任务

    本篇主要描述一下spring的多线程的使用与定时任务的使用. 1.spring多线程任务的使用 spring通过任务执行器TaskExecutor来实现多线程与并发编程.通常使用ThreadPoolT ...

  8. JavaScript脚本语言基础(四)

    导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式 正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...

  9. js中==, !==, === ,!=的区别

    在讨论比较符的时候我们先要来讨论哈js的类型,这样有助于我们从本质上了解原理. 下面是我找的资料加上个人的总结: js中有5种数据类型:Undefined.Null.Boolean.Number和St ...

  10. python-判断系统平台

    1.windows 2.linux 总结 python提供了sys,os及platform等个模块读取平台信息,客官可以根据自己的喜好选择使用