版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011240016/article/details/84960572
<!DOCTYPE html>
<html>
<head>
<title>
Learning React.js
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
</head>
<body>
<div class="container">
<div clas="row">
<div class="col-md-12">
<div id="jumbotron">
</div>
</div>
</div>
</div>
<!-- 注意在React16以后，createClass已经弃用了 -->
<script type="text/babel">
var Jumbotron = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired, //
},
getDefaultProps: function() {
return {
title: "Hello World",
text: "This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information",
link: "http://baidu.com"
}
},
render: function() {
return(
<div>
<div className="jumbotron">
<h1>{this.props.title}</h1>
<p className="lead"> { this.props.text }</p>
<a className="btn btn-primary btn-lg" href={ this.props.link } role="button">Learn more</a>
</div>
</div>
)
}
});
ReactDOM.render(
<Jumbotron
title="This is title"
text="This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to featured content or information"
link="http://baidu.com"
/>,
document.getElementById('jumbotron'));
</script>
</body>
</html>
上面给出的是两种设置方法，其中，getDefaultProps函数设定的是初始值，如果在下面render时提供了值，则会覆盖前面初始设定值。
关于
propTypes: {
title: React.PropTypes.string.isRequired, //
},
对变量进行限定，上面的示例是限定它类型为string且必须存在。
END.