React入门教程（二）

最新推荐文章于 2024-11-13 13:15:19 发布

原创最新推荐文章于 2024-11-13 13:15:19 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

9 篇文章

订阅专栏

React

3 篇文章

订阅专栏

今天做一个组件中套用组件的例子

直接上源码

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
	<script src="../build/browser.min.js"></script>
    <script src="../build/JSXTransformer.js"></script>
	<script src="../build/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

	<script type="text/jsx">
var converter = new Showdown.converter();


		var CommentBox = React.createClass({
			render:function(){
				return(
				<div className="commentBox">
					<CommentForm />
					<CommentList />
				</div>
			);
			}
		});
		var CommentList = React.createClass({
			render:function(){
				return(
					<div className="commentList">
						hello ! I am a commentList.
					</div>
				);
			}
		});
		var CommentForm = React.createClass({
			render:function(){
				return(
					<div className="commentFrom">
						hello ! I am a commentFrom.
					</div>
				);
			}
		});

		React.render(
			<CommentBox />,
			document.getElementById('example')
		);
		
	</script>
  </body>
</html>