props

每一个组件都是独立的,每一个组件都是可以重复利用,我们可以把组件当做一个函数,如果理解为函数,是不是可以根据调用者传进来的参数而展示不同的界面效果, 这里对组件传递的数据就需要使用 props 来接收。
import { Component, createClass } from 'react';
import { render } from 'react-dom';

// 定义组件
class Welcome extends React.Component {
  render() {
  	// this.props.text 通过调用组件时传过来
    return (
		<h1>
			Hello { this.props.text }
		</h1>
    );
  }
}


render(
  	<div>
  		//使用组件,定义自定义属性
  		//属性名作为 key (键值),属性值作为 value
  		<Welcome text="react.js"/>
  	</div>,
  	document.querySelector("#app")
);

props.children

children 属性用来接收调用组件时传递的一个集合对象
import { Component, createClass } from 'react';
import { render } from 'react-dom';

class Welcome extends React.Component {
  render() {
    return (
		<div>
			{
				//React.Children 用来处理 props 数据的一个集合
				React.Children.map(this.props.children, (child) => {
					return child;
				})
			}
		</div>
    );
  }
}


render(
  	<div>
  		<Welcome>
  			<span>hello</span>
  			<span>world</span>
  		</Welcome>
  	</div>,
  	document.querySelector("#app")
);
这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。