一、需求

当有传属性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. svn版本控制器在vs2013中的使用

      下面记录常用的几种用法:   a) SVN检出 将SVN服务端所保存的数据下载到个人工作平台. 组长上传初始项目后,各组员可以到服务器上检出项目 1. 打开Visual Studio 2010-& ...

  2. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  3. maven安装报错

    今天在安装maven时安照说明配置环境变量,通过命令检查: mvn -v 竟然出现以下错误,很郁闷的是我明明配置了JAVA_HOME,并且别的依赖java的东西都能用,通过java -version也 ...

  4. android开发连接wifi addNetwork 返回-1

    如下代码:(注释掉的是会返回-1的代码,未注释的是能够正常连接wifi的代码) // public WifiConfiguration CreateWifiInfo(String SSID, Stri ...

  5. 利用Java实现表达式二叉树

    (*^-^*) 什么是二叉树,这里不再介绍,可以自行百度:二叉树.在这里利用java实现“表达式二叉树”. 表达式二叉树的定义 第一步先要搞懂表达式二叉树是个什么东东?举个栗子,表达式:(a+b×(c ...

  6. SQL Server性能优化（1）使用SET函数

    在一切开始之前,先看下微软的建议:在系统的整体性能优化里面, TSQL优化优先级并不是最高的. 本文包括四部分: SET STATISTICS TIME ON SET STATISTICS IO SE ...

  7. 文件和文件夹同步工具AFiles 1.0 发布

    文件和文件夹同步工具AFiles 1.0  正式发布了! 本软件支持按文件日期或长度的各种比较方式来同步文件或者文件夹. 支持双向同步功能. 支持深层文件夹功能. 可以自动产生比较和同步的记录情况. ...

  8. HDU 5647 DZY Loves Connecting 树形dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5647 题解: 令dp[u][0]表示u所在的子树中所有的包含i的集合数,设u的儿子为vi,则易知dp ...

  9. SQL 语法 Join与Union

    问题描述: Join与Union使用 问题解决: Join连接,可以分为: tableA如下: tableB如下: 1.1.Inner Join SELECT * FROM TableA INNER ...

  10. 【BZOJ】【1046】【HAOI2007】上升序列

    DP+贪心 啊……其实是个水题,想的复杂了 令f[i]表示以 i 为起始位置的最长上升子序列的长度,那么对于一个询问x,我们可以贪心地从前往后扫,如果f[i]>=x && a[i ...