<七>组件属性的设置
2017-05-01 本文已影响0人
者薄
代码实现
代码中已经加入注释,所以这边也不再说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性的设置</title>
<script src="./build/react.js" charset="utf-8"></script>
<script src="./build/react-dom.js" charset="utf-8"></script>
<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
<div id="hello1">
</div>
<div id="hello2">
</div>
<div id="hello3">
</div>
<div id="hello4">
</div>
<div id="hello5">
</div>
</body>
<script type="text/babel">
/*
{this.props.xxx}是获取传递给当前节点的xxx属性值
*/
var WebName = React.createClass({
render:function(){
return <h1>{this.props.webName}</h1>;
}
});
var WebLink = React.createClass({
render:function() {
return <a href={this.props.webLink}>{this.props.webLink}</a>;
}
});
var WebShow = React.createClass({
render:function() {
return (
<div>
<WebName webName={this.props.wName} />
<WebLink webLink={this.props.wLink} />
</div>
);
}
});
ReactDOM.render(
<WebShow wName="我的简书" wLink="http://www.jianshu.com/u/66cc9085851b" />,
document.getElementById("hello1")
);
/*
...this.props可以将父亲中的属性传递给子
*/
var Link = React.createClass({
render:function() {
return <a {...this.props}>网易</a>;
}
});
ReactDOM.render(
<Link href="http://study.163.com/my" />,
document.getElementById("hello2")
);
/*
this.props.children的学习,传递的是子节点
*/
var CompomentLi = React.createClass({
render:function() {
return (
<ul>
{//注意大括号抱起来
/*
React.Children.map遍历数组的方法
参数一:遍历的数组对象this.props.children---表示当前元素的子节点
参数二:处理函数
*/
React.Children.map(this.props.children, function(child){
return <li>{child}</li>
})
}
</ul>
);
}
});
ReactDOM.render(
(
<CompomentLi>
<h1>你好</h1>
<a href="http://study.163.com/my">我的课堂</a>
</CompomentLi>
),
document.getElementById("hello3")
);
/*
属性组件的认证
*/
var VerfyTile = React.createClass({
propTypes: {
title:React.PropTypes.string.isRequired
},
render:function() {
return <h1>{this.props.title}</h1>;
}
});
ReactDOM.render(
<VerfyTile title="123" />,
document.getElementById("hello4")
);
/*
设置属性的默认值
getDefaultProps:function() {
return {
mytitle:"大家好啊"
};
}
*/
var Mytitle = React.createClass({
getDefaultProps:function() {
return {
mytitle:"大家好啊"
};
},
render:function() {
return <h1>{this.props.mytitle}</h1>;
}
});
ReactDOM.render(
<Mytitle />,
document.getElementById("hello5")
);
</script>
</html>
