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>
    

      

    三、运行结果

  • 相关阅读:
    [BZOJ1222/Luogu2224][HNOI2001]产品加工
    [BZOJ1079/Luogu2476][SCOI2008]着色方案
    [BZOJ3098]Hash Killer II
    [BZOJ1818][CQOI2010]内部白点
    [BZOJ1497/Luogu4174][NOI2006]最大获利
    [BZOJ2330/Luogu3275][SCOI2011]糖果
    [BZOJ1208/Luogu2286][HNOI2004]宠物收养场
    [BZOJ1054/Luogu4289][HAOI2008]移动玩具
    Com组件介绍
    webBrowse官方说明
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049927.html
Copyright © 2011-2022 走看看