5.JSX展开属性.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<div id="example1"></div>
	<div id="example2"></div>
	<script type="text/babel">
	/* 展开属性案例版 */
	var Component=React.createClass({
			render:function() {
				return <h3>Hello {this.props.name}</h3>
			}
		})
	var props={
		name:"Lucy",
		gender:"female"
	};
	var component=<Component {...props} />; /* {...props}属性扩散的写法 */
	ReactDOM.render(component,document.getElementById("example")); /* Hello Lucy */

	/* 属性也可以被覆盖：写在后面的属性值会覆盖前面的属性值 */
	var Component1=React.createClass({
		render:function() {
			return <h3>Hello {this.props.foo}</h3>
		}
	})
	var props1={foo:"default"};
	var component1=<Component1 {...props} foo={"override"} />;
	console.log(component1.props.foo); /* override */
	ReactDOM.render(component1,document.getElementById("example1")); /* Hello override */


	/* JSX展开属性 */

	/* 如果你事先知道组件需要的全部Props(属性)，JSx很容易地这样写：
		var component=<Component foo={x} bar={y} />; */

	/* 修改Props 是不好的，明白吗? 如果你不知道要设置哪些 Props，那么现在最好不要先去设置它（也就是等到用的时候才去设置）：
		var component=<Component />;
		component.props.foo=x; //不好
		component.props.bar=y; //同样不好
	这样是反模式，因为React不能帮你检查属性类型（PropTypes）。这样即使你的属性类型有错误也不能得到清晰的错误提示。
	Props应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果，所有原则上这将是一个冻结的对象。
	*/

	/* 展开属性(扩散属性) */
	/* 现在你可以使用JSX的新特性-展开属性：*/
		var Component=React.createClass({
			render:function() {
				return <div>hello,{this.props.foo}</div>
			}
		})
		var props={};
		props.foo="x";
		props.bar="y";
		var component=<Component {...props} />
		ReactDOM.render(component,document.getElementById("example"));
	</script>
	
</body>
</html>