React.js 基礎入門二--組件嵌套

組件：
在設計接口的時候，將常用元素（按鈕，表單字段，佈局組件等）分解成定義好接口的可重用組件。這樣下次你在創建同樣界面就可以少寫很多代碼，這意味着更快的開發時間，更少的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!