一、需求

当有传属性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. 62.在cdc文件上某些例化模块看不到的原因

    比如在顶层文件中,例化了几个模块,综合后打开cdc文件,会在structure/net中少几个例化模块,即看不到,但在顶层文件中还是存在的,只是ISE软件综合的问题而已,原因是在顶层或子模块中,有些应 ...

  2. [无人值守安装操作系统]_FTP+TFTP+DHCP+Kickstart+PXE_中遇到的错误

    本篇记录的是实验  http://www.cnblogs.com/snsdzjlz320/p/5629127.html  过程出现的问题 问题一: PXE-E11:ARP timeout TFTP c ...

  3. vbs操作txt文本文件常用方法（函数）

    创建文件 dim fso, f set fso = server.CreateObject("Scripting.FileSystemObject") set f = fso.Cr ...

  4. 程序开发心理学阅读笔记——第I篇

    1.软件的任务是为了解决某一特定的问题,而软件开发者的任务却需要解决一系列问题.2.温伯格说,我们不能要求每个人都聪明异常,能够解决所有难题:但是我们必须持续思考,因为只有如此,我们才能明白自己在做什 ...

  5. 查看linux命令类型

    type type -a type type是内建变量 root@akayer-p6:~# type -a lsls 是 `ls --color=auto' 的别名ls 是 /bin/ls

  6. JavaEDU614 团队第三周项目总结

    JavaEDU614 团队第三周项目总结 本周,根据项目计划完成模块的设计代码 本项目主要是完成俄罗斯方块的基本操作.用户可以自己练习和娱乐.需要满足以下几点要求. (1)界面控制游戏开始.暂停和结束 ...

  7. 如何写一个漂亮的Liferay Theme 6.2

    只要你看到的.想做出来的页面,都可以通过liferay theme来实现,至于具体实现凡方式,那就见仁见智了. 下面,我将介绍如何快速地建一个简单漂亮的liferay theme. 工具:lifera ...

  8. 国内最快的jquery cdn

    cdnjs.cn是cdnjs.com在国内的镜像服务,项目托管与著名的又拍云存储,目前又拍云在全国有几十个cdn节点,并且还在增加中. cdnjs.cn 托管的jquery相信会成为国内最快的jque ...

  9. android 开发 socket发送会有部分乱码，串码，伴随着数据接收不完整

    场景: 客户端A.B,A向B发送json字符串后紧接着发送文件,B接收到文件后才返回消息. 环境:android.使用的是原始的write 和read (若使用的是writeUTF不会出现此问题.)需 ...

  10. [转]Eclipse遇到的常见问题

    1.  提示:“Setting build path” has encountered a problem,Could not write file D:\\workspace\demo\.class ...