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

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

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

<scripttype="text/jsx">//注意此处
//定义web组件（<fontcolor="#ff0000">MessageBox错误组件嵌套实例</font>）
varMessageBox=React.createClass({
alertMessage:function(){
alert('Fuck谁点我呢！');
},render:function(){
return(
<h1onClick={this.alertMessage}>hellomyworld!</h1>
<ClickBox/>
);
}
});
varClickBox=React.createClass({
render:function(){
return(
<h2>ThisisClickBoxComponents</h2>
);
}
});
//渲染
React.render(
<MessageBox/>,document.getElementById('app'),function(){
console.log('渲染成功！真的');
});
</script>

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

downloadtheReactDevToolsforabetterdevelopmentexperience:http://fb.me/react-devtools
JSXTransformer.js:314Youareusingthein-browserJSXtransformer.BesuretoprecompileyourJSXforproduction-http://facebook.github.io/react/docs/tooling-integration.html#jsx
<b>JSXTransformer.js:5119UncaughtError:ParseError:Line10:AdjacentJSXelementsmustbewrappedinanenclosingtag
atfile:///Users/gaozhibin/Downloads/react-0.13.0/index.html</b>
<fontcolor="#ff0000">#JSX元素必须要用一个tag包裹起来</font>
...
^JSXTransformer.js:5119throwErrorJSXTransformer.js:9471parseJSXElementJSXTransformer.js:5883parsePrimaryExpressionJSXTransformer.js:5967parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007parsePostfixExpressionJSXTransformer.js:6074parseUnaryExpressionJSXTransformer.js:6164parseBinaryExpressionJSXTransformer.js:6224parseConditionalExpressionJSXTransformer.js:6477parseAssignmentExpressionJSXTransformer.js:6534parseExpressionJSXTransformer.js:5775parseGroupExpressionJSXTransformer.js:5868parsePrimaryExpressionJSXTransformer.js:5967parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007parsePostfixExpressionJSXTransformer.js:6074parseUnaryExpressionJSXTransformer.js:6164parseBinaryExpressionJSXTransformer.js:6224parseConditionalExpressionJSXTransformer.js:6477parseAssignmentExpressionJSXTransformer.js:6534parseExpressionJSXTransformer.js:7722parseReturnStatementJSXTransformer.js:7948parseStatementJSXTransformer.js:8709parseSourceElementJSXTransformer.js:8049parseFunctionSourceElementsJSXTransformer.js:8332parseFunctionExpressionJSXTransformer.js:5831parsePrimaryExpressionJSXTransformer.js:5967parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007parsePostfixExpressionJSXTransformer.js:6074parseUnaryExpressionJSXTransformer.js:6164parseBinaryExpressionJSXTransformer.js:6224parseConditionalExpressionJSXTransformer.js:6477parseAssignmentExpressionJSXTransformer.js:5494parSEObjectPropertyJSXTransformer.js:5697parSEObjectInitialiserJSXTransformer.js:5864parsePrimaryExpressionJSXTransformer.js:5967parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007parsePostfixExpressionJSXTransformer.js:6074parseUnaryExpressionJSXTransformer.js:6164parseBinaryExpressionJSXTransformer.js:6224parseConditionalExpressionJSXTransformer.js:6477parseAssignmentExpressionJSXTransformer.js:5922parseSpreadOrAssignmentExpressionJSXTransformer.js:5898parseArgumentsJSXTransformer.js:5971parseLeftHandSideExpressionAllowCallJSXTransformer.js:6007parsePostfixExpressionJSXTransformer.js:6037parseUnaryExpressionJSXTransformer.js:6164parseBinaryExpressionJSXTransformer.js:6224parseConditionalExpressionJSXTransformer.js:6477parseAssignmentExpressionJSXTransformer.js:7116parseVariableDeclarationJSXTransformer.js:7126parseVariableDeclarationListJSXTransformer.js:7141parseVariableStatementJSXTransformer.js:7956parseStatementJSXTransformer.js:8709parseSourceElementJSXTransformer.js:8757parseProgramElementJSXTransformer.js:8789parseProgramElementsJSXTransformer.js:8802parseProgramJSXTransformer.js:9964parseJSXTransformer.js:12510getAstForSourceJSXTransformer.js:12533transformJSXTransformer.js:435innerTransformJSXTransformer.js:3752.module.exports.transformWithDetailsJSXTransformer.js:52transformReactJSXTransformer.js:126transformCodeJSXTransformer.js:183runJSXTransformer.js:238checkJSXTransformer.js:291loadScriptsJSXTransformer.js:320runScripts

修改MessageBox组件：

varMessageBox=React.createClass({
alertMessage:function(){
alert('Fuck谁点我呢！');
},render:function(){
return(
<div>
<h1onClick={this.alertMessage}>hellomyworld!</h1>
<ClickBox/>
</div>
);
}
});

DOM元素中data-reactid 属性是干什么用的呢？
如果多次调用此组件？

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

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

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

相关文章