ReactJS- 组合组件

git6888 · Sep 23, 2016 · 2e4ffd2 · 2e4ffd2
1 parent 233b1b8
commit 2e4ffd2
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -23,7 +23,8 @@ project.update  = {
             '9、表单',
             '10、组件的生命周期',
             '操作样式',
-            '单向数据流'
+            '单向数据流',
+            '03组合组件'
         ]}
     ]    
 }

diff --git a/React/code/03组合组件/03组合组件.html b/React/code/03组合组件/03组合组件.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>03组合组件|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
+    <meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
+    <meta name="Author" content="dunizb">
+    <meta name="website" content="http://www.dunizb.com">
+    <meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
+    <link type="image/x-icon" rel="shortcut icon" href="../../favicon.ico"/>
+    <script src="../../node_modules/react/dist/react.min.js"></script>
+    <script src="../../node_modules/react-dom/dist/react-dom.min.js"></script>
+</head>
+<body>
+  <div id="box"></div>
+
+  <script src="03组合组件.js"></script>
+</body>
+</html>
diff --git a/React/code/03组合组件/03组合组件.js b/React/code/03组合组件/03组合组件.js
@@ -0,0 +1,54 @@
+"use strict";
+
+// 创建评论组件
+var CommonList = React.createClass({
+    displayName: "CommonList",
+    render: function render() {
+        return React.createElement(
+            "div",
+            null,
+            React.createElement(
+                "span",
+                null,
+                this.props.item
+            )
+        );
+    }
+});
+
+// 创建评论框组件
+var CommonBox = React.createClass({
+    displayName: "CommonBox",
+    render: function render() {
+        // 假设这里你已经拿到数据
+        // var data = ["我看了，没问题","我是中国人，我爱自己的祖国。",
+        // "小明，你知道小红在哪里吗?"]
+        var data = ["我看了，没问题", "我是中国人，我爱自己的祖国。", "小明，你知道小红在哪里吗?"];
+        return React.createElement(
+            "div",
+            null,
+            React.createElement(
+                "h1",
+                null,
+                "以下是评论"
+            ),
+            data,
+            React.createElement(
+                "h2",
+                null,
+                "-----华丽的分割线-----"
+            ),
+            data.map(function (item, index) {
+                return React.createElement(CommonList, { key: index, item: item });
+            }),
+            React.createElement("input", { type: "text" }),
+            React.createElement(
+                "button",
+                null,
+                "发表评论"
+            )
+        );
+    }
+});
+
+ReactDOM.render(React.createElement(CommonBox, null), document.getElementById('box'));
diff --git a/React/code/03组合组件/03组合组件.jsx b/React/code/03组合组件/03组合组件.jsx
@@ -0,0 +1,38 @@
+// 创建评论组件
+let CommonList = React.createClass({
+    render(){
+        return (
+            <div>
+                <span>{this.props.item}</span>
+            </div>
+        );
+    }
+});
+
+// 创建评论框组件
+let CommonBox = React.createClass({
+    render(){
+        // 假设这里你已经拿到数据
+        // var data = ["我看了，没问题","我是中国人，我爱自己的祖国。",
+        // "小明，你知道小红在哪里吗?"]
+        let data = ["我看了，没问题","我是中国人，我爱自己的祖国。","小明，你知道小红在哪里吗?"];
+        return (
+            <div>
+                <h1>以下是评论</h1>
+                {data}
+                <h2>-----华丽的分割线-----</h2>
+                {
+                    data.map( function(item,index){
+                        return <CommonList key={index} item={item} />
+                    })
+                }
+                <input type="text" /><button>发表评论</button> 
+            </div>
+        );
+    }
+});
+
+ReactDOM.render(
+    <CommonBox />,
+    document.getElementById('box')
+);