一、语法简介
表达式可以以下两种方法,
(1)(function A(){})(this),(this)参数在函数外面
(2)(function B(){}(this)),(this)参数在函数里面
(1)和(2)的区别在于,(1)的左边的一对括号是强制A()求值,返回函数的引用,再传this参数调用函数求值,而(2)是把(this)传给A(),直接返回函数的返回值,而不是函数引用本身。
方式一:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script> <script type="text/jsx"> var style = { color : "red", border: "1px #000 solid", }; var HelloWorld = React.createClass({ render: function(){ return <p>你好, { (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>
方式二:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script> <script type="text/jsx"> var style = { color : "red", border: "1px #000 solid", }; var HelloWorld = React.createClass({ render: function(){ return <p>你好, { (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>
运行结果: