Props(属性)

组件创建的时候需要用不同的参数进行定制，这些定制的参数就是props（属性），可为组件内部属性，也可为外部属性。

props 是组件自身的属性对象，一般用于嵌套的内外层组件中，负责传递信息（通常是由浮层组件向子层组件传递）

     注意：props对象中的属性与组件的属性是一一对应，不要直接去修改props中属性的值

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

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);

我们在 Greeting 组件中将 name 作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把 Greeting 组件写在JSX语句中，用法和内置组件并无二致——这正是React体系的魅力所在——如果你想搭建一套自己的基础UI框架，那就放手做吧！
上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的UI组件了。要学习如何动态修改你的界面，那就需要进一步学习State（状态）的概念。

扩展

初始化 Props 设置默认值

(这是 ES5 的书写方式)

//创建一个 ShowDefault 的组件
  var ShowDefault = React.createClass({
    // 初始化props 设置默认值
    getDefaultProps: function(){
      return {
        name: "张三",
        age:18
      };
    },
      render: function(){
        return <h1>{this.props.name}{this.props.age}</h1>
      }
  });

  ReactDOM.render(
    <ShowDefault />,
    document.getElementById("container")
  );

...this.props

props提供的语法糖,可以将父组件中的全部属性都复制给子组件
以下代码是 React.js 的代码写法

   var Link = React.createClass({
      render: function(){
        return <a {...this.props}>{this.props.name}</a>
      }
   });

   ReactDOM.render(
     <Link href="https://www.baidu.com" name="百度" />,
     document.getElementById('container')
   );

this.props.children

children 是一个例外,不是跟组件的属性对应的,表示组件的子节点
HTML5 中有一种标签:列表 <ul><ol><li>
定义一个列表组件,列表项中显示的内容,以及列表项的数量都由外部决定

    var ListComponent = React.createClass({
      render: function(){
        return(
            <ul>
                {
                  /*
                    列表项的数量以及内容不确定,在创建模板的时候才可以确定
                    利用this.props.children从父组件获取列表项需要展示的列表项内容

                    获取到列表项内容后,需要便利children,逐项进行设置,
                    使用React.Children.map方法
                    返回值:数组对象.这里数组中的元素是<li>
                   */

                   React.Children.map(this.props.children,function(child){
                    //  child 是遍历得到的费组件的子节点
                    return <li> {child}</li>
                   })
                }
            </ul>
        )
      }
    });
      ReactDOM.render(
          (<ListComponent>
            <h1> 百度 </h1>
            <a href ="http://www.baidu.com">http://www.baidu.com</a>
          </ListComponent>),
          document.getElementById("container")

      );

props 和 state 的区别

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

React Native - React Props（属性）