react中 props與forEach的用法

時間 2020-05-06

原文原文鏈接

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