<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="lib/react.min.js" ></script>
<script type="text/javascript" src="lib/react-dom.min.js" ></script>
<script type="text/javascript" src="lib/browser.min.js" ></script>
<script type="text/babel" >
var Hello = React.createClass({
getDefaultProps:function(){
return{
age:11
}
},render:function(){
<!-- 原始的写法 -->
<!-- return(
<span {this.props.name} {this.props.id}>Hello {this.props.name} !</span>
); -->
<!-- jsx...解构的写法 -->
<!-- return(
<span {...this.props}>Hello {this.props.name} !</span>
); -->
<!-- other排除写法 -->
var {name,...other} = this.props;
return (
<span {...other}>Hello {this.props.name} !</span>
);
}
});
var property = {
name:"loser",age:"1",grade:"2",id:"1",'data-action':"run"
}
ReactDOM.render(
<Hello {...property}/>,document.getElementById('main')
)
<!-- 当我们要在组件的元素上加上一些属性的时候，我们可以通过{this.props.属性名}从组件的父节点上面获取到该属性，但是当有很多个属性的时候，我们则需要逐条的通过{this.props.属性名}添加各个属性，这就会变得十分的麻烦。所以可以利用jsx的...解构的方法，可以一次性添加上父节点上的属性。注意只能给元素添加一些html标准的属性，如id ，name,其他一些自定义的属性比如method 只能用于传递数据并不能显示在真实的dom结构上。other用法：用于排除一些你不想显示在元素的属性，比如上例中{name,...other}就显示除name以外的属性 -->
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
