标签：turn indicator 方式 closed 保留 err 拼接 关键字 基于
<script type="text/jsx"> var HelloMessage=React.createClass({ render:function(){ return <div className="test">Hello{this.props.name}</div>; } }); React.render(<HelloMessage name="李明"></HelloMessage>>,mountNode); </script>
看这个例子，很简单，只是实现了render函数，从上面的代码中，我们可以看出，jsx其实本质上就是js，他和js的区别就是可以直接在里面编写html标签，这在普通的js中是无法实现的，要想实现只能采用字符串的形式来拼接标签，但是在jsx中，可以原生的支持html标签。
第一个知识点：HelloMessage,元素名,我们编写的每一个组件其实也就是一个元素名，这里我们声明了一个HelloMessage标签，在最后一行中，我们将它渲染到了mountNode中，我们可以看到，渲染的时候使用的语法就是标准的html语法，直接在标签中填写标签名，只是这个标签名是我们自定义出来的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world{ /* 这是一个多行注释 */ //这是一个单行注释 }</p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p /* 这是一个注释 */ name="李明"//这里是一个属性，单行注释也可以和属性放在同一行 //这是一个单行注释 >Hello,world { /* 这是一个多行注释，放在了子节点中 */ "Jerry"//他是字符串，由于被包裹在大括号中，本身应该是js，所以应该用双引号包裹 //我是单行注释 } </p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world</p> } }); React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); </script> </body> </html>
需要注意的是其他属性的赋值一般是字符串，但是style 属性的赋值一般是一个对象，这是因为style属性比较特殊，react会把style里面自定义的属性，正确的应用到style上面，
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
我们将我们的自定义组件HelloWorld放到了div中，实际开发中，我们可以嵌套无数个。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ if(this.props.name) this.props.name esle "world" }</p> } }); React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name ? this.props.name : "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.2使用一个变量，我们通过函数来个这个变量赋值，最后把变量的值直接用在大括号里。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//这里有逗号，切记 render: function(){ var name=this.getName(); return <p>Hello,{name}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.3改8.2中的例子，直接把大括号去掉，直接调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//这里的逗号 render: function(){ return <p>Hello,{this.getName()}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.4使用比较计算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name || "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" })(this) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
这个例子要注意理解强制求值运算，也就是把function包裹起来的那个括号，在这个括号里面的function会被强制求值运算，他会返回一个函数的引用，然后我们又在后面加了一个(this),用()来调用他， 并传入一个this，就可以实现我们想要的效果
(function(obj){
})(this)
这个括号还有一种写法，就是把(this)前面的括号放到后面，具体看代码，也是可以的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" }(this)) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
括号放在外面和里面的区别，放在里面的时候，括号执行完毕拿到的是函数的引用，然后在调用他，但是括号放在外面的时候，弄到的直接就是返回值，而不是函数引用本身。建议大家看看this的用法。
标签：turn indicator 方式 closed 保留 err 拼接 关键字 基于
原文地址：http://www.cnblogs.com/Gabriel-Wei/p/6103155.html
