react中 props与forEach的用法

最新推荐文章于 2023-08-10 15:53:47 发布

weixin_30273931

最新推荐文章于 2023-08-10 15:53:47 发布

阅读量198

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yaomengli/p/9225154.html

版权

<!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>