记住一句话:渲染一个复合组件时，一定要将两个组件封装在同一个标签内进行渲染。
props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用。
参考下面的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="https://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked:!this.state.liked});
},
render: function() {
var text = this.state.liked?"yellow":"blue";
var style = {
color:text
}
return (
<p onClick={this.handleClick} style={style}>
我是{this.props.name},不是"齐天大圣"//{this.props.name}接收名称叫name的参数
</p>
);
}
});
React.render(
<LikeButton name="七天大圣"/>,//在组件实例化过程中传递一个名称叫name的参数。
document.getElementById('example')
);
</script>
</body>
</html>
props相当于一个对象，传递的参数保存到这个对象里面。我们也可以给这个对象添加一些固定参数，可以在组件内直接引用。
可以通过在 getDefaultProps() 方法在构建组件的过程中为 props 设置默认值
var Message = React.createClass({
getDefaultProps: function() {
return {
name: '齐天大圣'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);