一、需求

当有传属性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>

　　

三、运行结果

通过表达式、函数给React组件属性赋值的更多相关文章

  1. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  2. React组件属性/方法/库属性

    1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...

  3. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  4. React组件的防呆机制（propTypes）

    Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...

  5. C#利用lambda表达式将函数作为参数或属性跨类传递

    在编码时,由于开始是在winform下进行简单的测试开发的,后来代码多了,就想分到不同的类里边去,可是因为原来的测试是在同一个form下的,所以对于函数调用可以很方便,而一旦跨类之后,就会发现,这函数 ...

  6. React组件实现越级传递属性

    如果有这样一个结构:三级嵌套,分别是:一级父组件.二级子组件.三级孙子组件,且前者包含后者,结构如图: 如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下 ...

  7. React - 组件：函数组件

    目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...

  8. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  9. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

随机推荐

  1. plist 读取 swift

    // // ViewController.swift // plist读写 // // Created by mac on 15/7/13. // Copyright (c) 2015年 fangyu ...

  2. 用C语言实现的扑克牌洗牌程序

    一副牌:54张 从0开始排序: 0-12表示黑桃   A 1,2,3,... 10,J,Q,K 13-25表示红桃 A 1,2,3,... 10,J,Q,K 26-38表示草花 A 1,2,3,... ...

  3. 盘点Windows 8.1中隐藏着的25个秘密功能

    Windows 8.1正式版问世,带来了众多大家早已耳熟能详的“开始按钮”.“分屏显示”等功能.事实上,Windows 8.1贴心的设计细节有很多,多数细节隐藏于系统中某个不起眼的角落,科技网站PC ...

  4. 04.spring-data-redis与Jedis整合使用

    1.spring-data-redis与Jedis简单整合 spring-data-redis与Jedis简单整合,Redis没有任何集群只是单节点工作,使用连接池 1.创建spring-contex ...

  5. 【BZOJ】【3504】【CQOI2014】危桥

    网络流/最大流 比较裸的最大流= = 无向图上走来回其实就等价与走两遍>_> 如果路径有相交其实不影响答案的 比较恶心的是两个人路过同一座桥,但走的方向不同互相抵消流量了…… 其实只要在第 ...

  6. 博弈论入门小结 分类： ACM TYPE 2014-08-31 10:15 73人阅读 评论(0) 收藏

    文章原地址:http://blog.csdn.net/zhangxiang0125/article/details/6174639 博弈论:是二人或多人在平等的对局中各自利用对方的策略变换自己的对抗策 ...

  7. matrix_2015_1 138 - ZOJ Monthly, January 2015

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3844 第一个,n个数,每次操作最大数和最小数都变成他们的差值,最后n个数相 ...

  8. 【bzoj1011】[HNOI2008]遥远的行星

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 3711  Solved ...

  9. [百度空间] [note] pointer to member is a POD type

    C++03 3.9-10: 1 Arithmetic types (3.9.1), enumeration types, pointer types, and pointer to member ty ...

  10. Uart串口与RS232串口的区别

    Uart指的是TTL电平的串口:RS232指的是RS232电平的串口. TTL电平是3.3V的,而RS232是负逻辑电平,它定义+5~+12V为低电平,而-12~-5V为高电平. Uart串口的RXD ...