zoukankan      html  css  js  c++  java
  • 通过表达式、函数给React组件属性赋值

    一、需求

    当有传属性name的值时,则显示Hello "name",否则显示Hello World

    二、4种方式的代码实现

    1.通过三元运算符

    <!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>你好,{this.props.name ? this.props.name : "World!"} </p>;
    			}
    		});
    		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
    	</script>
    </body>
    
    </html>
    

      

    2.通过变量

    <!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({
    			getName : function(){
    				if(this.props.name)
    					return this.props.name
    				else
    					return "World!"	
    			},
    			render: function(){
    				var name = this.getName();
    				return <p>你好, {name}</p>;
    			}
    		});
    		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
    	</script>
    </body>
    
    </html>
    

      

    3.直接在属性调用函数

    <!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({
    			getName : function(){
    				if(this.props.name)
    					return this.props.name
    				else
    					return "World!"	
    			},
    			render: function(){
    				return <p>你好, {this.getName()}</p>;
    			}
    		});
    		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
    	</script>
    </body>
    
    </html>
    

      

    4.用与运算

    <!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>你好, {this.props.name || "World!"}</p>;
    			}
    		});
    		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
    	</script>
    </body>
    
    </html>
    

      

    三、运行结果

  • 相关阅读:
    pytorch图像处理的问题
    MWCNN中使用的haar小波变换 pytorch
    GhostNet: More Features from Cheap Operations
    人脸检测和识别以及检测中loss学习
    人脸检测和识别以及检测中loss学习
    C++ string的find类函数的使用
    pytorch各个版本的.whl文件下载地址
    人脸识别和检测中loss学习
    人脸识别和检测中loss学习
    人脸识别和检测中错误数据的三种类别
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049927.html
Copyright © 2011-2022 走看看