<!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({css
//getDefaultProps为默认函数这里给message传递一个值就会显示默认函数没有传递值就会按照下面forEach中定义的message值显示html
getDefaultProps:function(){react
return{babel
message：[‘默认的自消息’] dom
}函数
}
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>this