一、需求

当有传属性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. 如何使用和了解ALTERA的IP核

    可以通过直接对IP核进行仿真验证,通过波形来分析IP核的功能和工作方式,以及各个寄存器之间的工作关系. 也可以通过查看用户指导手册来学习IP核,如下图.

  2. Python实现DBScan

    Python实现DBScan 运行环境 Pyhton3 numpy(科学计算包) matplotlib(画图所需,不画图可不必) 计算过程 st=>start: 开始 e=>end: 结束 ...

  3. 通过find命令寻找文件并拷贝到一个指定目录方法详解

    有这样的一个需求,需要将一部分符合条件的文件从一个目录拷贝到另一个目录中,可以通过使用find命令从源目录查找到符合条件的文件然后使用cp命令拷贝到目标目录   将通过find命令找到的文件拷贝到一个 ...

  4. C++中复制构造函数与重载赋值操作符总结

    前言 这篇文章将对C++中复制构造函数和重载赋值操作符进行总结,包括以下内容: 1.复制构造函数和重载赋值操作符的定义: 2.复制构造函数和重载赋值操作符的调用时机: 3.复制构造函数和重载赋值操作符 ...

  5. WPF——数据绑定（二）绑定方法—绑定本地对象

    注意:本人初学WPF,文中表达或技术性问题请勿见怪,欢迎指正,谢谢 标记拓展语法:绑定到本地对象 什么是绑定到本地对象,我个人理解就是实现UI层上两个或多个控件的相互关联,一个控件的状态改变,导致另一 ...

  6. SQL Server Reporting Services – Insufficient Rights Error

    http://www.sql-server-performance.com/2011/security-ssrs-reporting-error/ SQL Server Reporting Servi ...

  7. MVC5 + EF6 入门完整教程 （1）

    第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定" 会让人困惑,而且东西太多容易忘记 ...

  8. eclipse编辑jsp文件和javascript代码很卡解决办法

    1.Window -> Preference -> General -> Editors -> Text Editors -> HyperLinking -> 在用 ...

  9. 【BZOJ】【1008】【HNOI】越狱

    快速幂 大水题= = 正着找越狱情况不好找,那就反过来找不越狱的情况呗…… 总方案是$m^n$种,不越狱的有$m*(m-1)^{n-1}$种= = 负数搞搞就好了…… 莫名奇妙地T了好几发…… /** ...

  10. Oracle 11g安装与使用

    作为一个新手,学习Oracle,就连安装oracle都感觉到吃力! 经过不间断的搜罗.学习.尝试,找到一些比较有用的“指导”,罗列如下: 1. http://www.2cto.com/database ...