<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鳥教程 React 實例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {
subMessages:[
'我可以用代碼搬磚',
'以及花式搬磚',
'不說了、工頭讓我回去搬磚'
]
}
},
render: function() {
return (
<Submessage messages={this.state.subMessages} />
);
}
});
var Submessage=React.createClass({
//getDefaultProps為默認函數這里給message傳遞一個值就會顯示默認函數沒有傳遞值就會按照下面forEach中定義的message值顯示
getDefaultProps:function(){
return{
message：[‘默認的自消息’]
}
}
render:function(){
var msgs=[];
this.props.messages.forEach(function(msg,index){
msgs.push(
<p>碼農說:{msg}</p>
)
});
return(
<div>{msgs}</div>
)
}
})
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>