代碼實現
代碼中已經加入注釋,所以這邊也不再說明
<!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.lxweimin.com/u/66cc9085851b" />,
document.getElementById("hello1")
);
/*
...this.props可以將父親中的屬性傳遞給子
*/
var Link = React.createClass({
render:function() {
return <a {...this.props}>網易</a>;
}
});
ReactDOM.render(
<Link />,
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 >我的課堂</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>
