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>
    

      

    三、运行结果

  • 相关阅读:
    Android开发切换host应用
    HTTP缓存相关头
    我理解的Android加载器
    Mysql的NULL的一个注意点
    Android的Activity生命周期
    说说jsonp
    PHP的pcntl多进程
    谈谈不换行空格
    关于Java代码优化的44条建议!
    java8 遍历数组的几种方式
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049927.html
Copyright © 2011-2022 走看看