zoukankan      html  css  js  c++  java
  • React 万能的函数表达式

    一、语法简介

    表达式可以以下两种方法,

    (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>
    

      

    运行结果:

  • 相关阅读:
    IIS中ASP.NET安全配置
    好用的SQLSERVER数据库自动备份工具SQLBackupAndFTP(功能全面)
    js取两位小数点
    json格式的ajax传输交互
    js全选与反选
    formdata,ajax提交数据
    js判断是否微信浏览器、IE浏览器
    js实现列表从下往上循环滚动
    绝对定位始终居中
    存储、字符串截取、两端对齐、样式绑定、微信调拨号功能
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049950.html
Copyright © 2011-2022 走看看