React.js 基础入门二--组件嵌套

标签：react.js   react教程   

组件：
在设计接口的时候，将常用元素（按钮，表单字段，布局组件等）分解成定义好接口的可重用组件。这样下次你在创建同样界面就可以少写很多代码，这意味着更快的开发时间，更少的bug，和更少的内容下载。

将上章节Index.html中Js部分修改为：

<script type="text/jsx">   // 注意此处
                // 定义web组件 （<font color="#ff0000">MessageBox 错误组件嵌套实例</font>）
                var MessageBox = React.createClass({
                        alertMessage:function (){
                                alert(‘Fuck谁点我呢！‘);
                        },
                        render:function (){
                                return (
                                        <h1 onClick={this.alertMessage}>hello my world!</h1>
                                        <ClickBox/>
                                );
                        }
                });
                var ClickBox = React.createClass({
                        render:function(){
                                return (
                                        <h2> This is ClickBox Components  </h2>
                                );
                        }
                });
                // 渲染
                React.render(
                        <MessageBox/> , 
                        document.getElementById(‘app‘), 
                        function (){
                                console.log(‘渲染成功！真的‘);
                        });
        </script>

在浏览器中打开：控制台输出：

download the React DevTools for a better development experience: http://fb.me/react-devtools
JSXTransformer.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
<b>JSXTransformer.js:5119 Uncaught Error: Parse Error: Line 10: Adjacent JSX elements must be wrapped in an enclosing tag
    at file:///Users/gaozhibin/Downloads/react-0.13.0/index.html</b>
<font color="#ff0000">#JSX元素必须要用一个tag 包裹起来</font>
... 
                                ^JSXTransformer.js:5119 throwErrorJSXTransformer.js:9471 parseJSXElementJSXTransformer.js:5883 parsePrimaryExpressionJSXTransformer.js:5967 parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007 parsePostfixExpressionJSXTransformer.js:6074 parseUnaryExpressionJSXTransformer.js:6164 parseBinaryExpressionJSXTransformer.js:6224 parseConditionalExpressionJSXTransformer.js:6477 parseAssignmentExpressionJSXTransformer.js:6534 parseExpressionJSXTransformer.js:5775 parseGroupExpressionJSXTransformer.js:5868 parsePrimaryExpressionJSXTransformer.js:5967 parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007 parsePostfixExpressionJSXTransformer.js:6074 parseUnaryExpressionJSXTransformer.js:6164 parseBinaryExpressionJSXTransformer.js:6224 parseConditionalExpressionJSXTransformer.js:6477 parseAssignmentExpressionJSXTransformer.js:6534 parseExpressionJSXTransformer.js:7722 parseReturnStatementJSXTransformer.js:7948 parseStatementJSXTransformer.js:8709 parseSourceElementJSXTransformer.js:8049 parseFunctionSourceElementsJSXTransformer.js:8332 parseFunctionExpressionJSXTransformer.js:5831 parsePrimaryExpressionJSXTransformer.js:5967 parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007 parsePostfixExpressionJSXTransformer.js:6074 parseUnaryExpressionJSXTransformer.js:6164 parseBinaryExpressionJSXTransformer.js:6224 parseConditionalExpressionJSXTransformer.js:6477 parseAssignmentExpressionJSXTransformer.js:5494 parseObjectPropertyJSXTransformer.js:5697 parseObjectInitialiserJSXTransformer.js:5864 parsePrimaryExpressionJSXTransformer.js:5967 parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007 parsePostfixExpressionJSXTransformer.js:6074 parseUnaryExpressionJSXTransformer.js:6164 parseBinaryExpressionJSXTransformer.js:6224 parseConditionalExpressionJSXTransformer.js:6477 parseAssignmentExpressionJSXTransformer.js:5922 parseSpreadOrAssignmentExpressionJSXTransformer.js:5898 parseArgumentsJSXTransformer.js:5971 parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007 parsePostfixExpressionJSXTransformer.js:6037 parseUnaryExpressionJSXTransformer.js:6164 parseBinaryExpressionJSXTransformer.js:6224 parseConditionalExpressionJSXTransformer.js:6477 parseAssignmentExpressionJSXTransformer.js:7116 parseVariableDeclarationJSXTransformer.js:7126 parseVariableDeclarationListJSXTransformer.js:7141 parseVariableStatementJSXTransformer.js:7956 parseStatementJSXTransformer.js:8709 parseSourceElementJSXTransformer.js:8757 parseProgramElementJSXTransformer.js:8789 parseProgramElementsJSXTransformer.js:8802 parseProgramJSXTransformer.js:9964 parseJSXTransformer.js:12510 getAstForSourceJSXTransformer.js:12533 transformJSXTransformer.js:435 innerTransformJSXTransformer.js:375 2.module.exports.transformWithDetailsJSXTransformer.js:52 transformReactJSXTransformer.js:126 transformCodeJSXTransformer.js:183 runJSXTransformer.js:238 checkJSXTransformer.js:291 loadScriptsJSXTransformer.js:320 runScripts

修改MessageBox组件：

var MessageBox = React.createClass({
                        alertMessage:function (){
                                alert(‘Fuck谁点我呢！‘);
                        },
                        render:function (){
                                return (
                                        <div>
                                                <h1 onClick={this.alertMessage}>hello my world!</h1>
                                                <ClickBox/>
                                        </div>
                                );
                        }
                });

DOM元素中data-reactid 属性是干什么用的呢？

如果多次调用此组件？

var MessageBox = React.createClass({
                        alertMessage:function (){
                                alert(‘Fuck谁点我呢！‘);
                        },
                        render:function (){
                                // 编写我们的逻辑代码         
                                var arr = [];
                                for (var i=0; i<10; i++){
                                        arr.push(<ClickBox key={‘reactJs‘+i+i}/>);<b>  // 注意{}的含义此处， 不加key属性，控制台提示warning信息，查看DOM元素了解作用</b>
                                }
                                return (
                                        <div>
                                                <h1 onClick={this.alertMessage}>hello my world!</h1>
                                                {arr}
                                        </div>
                                );
                        }
                });

在浏览器中打开， 看到什么，你也许已经猜到！
浅显的笔记，望指正。


The End!

本文出自 “90设计工作室” 博客，转载请与作者联系！

React.js 基础入门二--组件嵌套

标签：react.js   react教程   

原文地址：http://90design.blog.51cto.com/5046429/1660639