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 来传递数据。
