props

// 这里是导入的包
import React, { Component } from ‘react‘;
// 导入需要用到的组件
import {
  AppRegistry,
  Text,
  View
} from ‘react-native‘;

// 定义一个类,在 render 回调中返回 Text 控件,
class Greeting extends Component{
  render(){
    return(
// 从调用标签中取出 props.name ,并将其插入到 文本中
      <Text>你好,{this.props.name}!</Text>
    );
  }
}

export default class AwesomeProject extends Component {
  render() {
    return(
      <View style={{alignItems:‘center‘,marginTop:50}}>
        <Greeting name=‘李荣浩‘ />
        <Greeting name=‘李云龙‘ />
        <Greeting name=‘李小璐‘ />
      </View>
    );
  }
}

AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);
时间: 2024-10-17 03:49:44

props的相关文章

Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div>组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件.</div> <br /> <child msg="hello, vue.js!"></child> <

Props文件属性读取

Properties props=new Properties(); try { props.load(new InputStreamReader(getClass().getResourceAsStream("/config.properties"), "UTF-8")); } catch(Exception e) { e.printStackTrace(); } props.get("socket.io.ip"); props.get(&qu

componentWillReceiveProps详解(this.props)状态改变检测机制

参考资料:http://blog.csdn.net/ElinaVampire/article/details/51813677 大家先看一张关于组件挂载的经典的图片: 下面一一说一下这几个生命周期的意义: getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的 这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaul

[Preact] Use State and Props in the Component Render Function

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructurin

props的写法

简写 props: ['demo-first', 'demo-second'] 带类型 props: { 'demo-first': Number, 'demo-second': Number } 带多种检查 props: { 'demo-first': { type: Number, default: 0 } ... } 所以, 当你获取不到props的值的时候,可以先仔细检查拼写是否正确. 传值与传字面量 在vue的组件中传递数据,如果是单纯传递字面量,如 <hello result="

Vue系列: 如何通过组件的属性props设置样式

比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components.html#Props 所以我在该组件的内部添加了mapHeight属性,如下: props:{ // 地图在该视图上的高度 mapHeight:{ type: Number, default: 200 } } 然后要在地图的div中通过样式设置该div的高度,,可以有以下三种方式: 第一种: <d

vue学习:props,scope,slot,ref,is,sync等知识点

1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user-profile ref="profile"></user-profile>(子组件)</div> var parent = new Vue({ el: '#parent' })// 访问子组件var child = parent.$refs.profile p

React Native props &amp; state

今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是 this.props.propertyName this.state.stateName 这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容 /** * Sample React Native

vue2中component父子组件传递数据props的使用

子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改. 现在是传递对象的语法 app.vue(父组件): <style scoped lang='stylus'> </style> <template> <div> <h1>我是app组件</h1> <zujian :data=

[Recompose] Transform Props using Recompose --mapProps

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field. For example, we have a UserLis