一、需求

当有传属性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. 21.altera fpga 芯片中 pin 和 pad 区别

    在chip planner 中 ,看管脚时,会看到 pin 和pad 同时出现, 如 pin120/pad174 Bank 4 那么有什么区别? PIN指芯片封装好后的管脚,即用户看到的管脚: PAD ...

  2. 邻接表实现Dijkstra算法以及DFS与BFS算法

    //============================================================================ // Name : ListDijkstr ...

  3. 关于spring mvc MaxUploadSizeExceededException 死循环解决方案

    当看到这文章的时候相信你现在应该遇到这样的问题了,我也是自己遇到了后来找到解决方案了记录下来,如果下次遇到就可以直接解决了. 至于为什么会出现这样的情况,可以看这篇文章:https://bz.apac ...

  4. 微软Hololens学院教程-Hologram 220-空间声音（Spatial sound ）【本文是老版本，与最新的微软教程有出入】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦! 原文链接https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  5. C#委托详解（1）：什么是委托

    本系列文章将详细探讨C#中的委托,列举其主要的实现方式,并分析其在设计层面和编码层面带来的好处,最后会讨论其安全性和执行效率等. 什么是委托? 委托是寻址方法的.NET版本,使用委托可以将方法作为参数 ...

  6. 【反射】——Autofac 类型注册

    Autofac是.net界一款轻量化的IOC组件,使用Autofac可以帮助完成代码中很多依赖注入工作.在以前文章中,介绍过Autofac的配置过程(http://www.cnblogs.com/Jn ...

  7. Java Synchronized Blocks vs. Methods

    It's possible to synchronize both an entire method and a section of code within a method, and you ma ...

  8. Cannot install ubuntu or other linux flavours on citrix Xen server

    Citrix Xen sucks! When u try to install linux stuff on its Xen servers, u will get an error complain ...

  9. 博文&零散信息阅读

    关于培养方案: 全国一线高校.网易云课堂和我院培养计划的区别主要体现在: 基础课上,我院删去了物理课程的必修要求. 专业课上,删去了汇编语言.编译原理.信息安全技术等学科的必修要求. 专业选修课上,我 ...

  10. poj 1985 Cow Marathon 树的直径

    题目链接:http://poj.org/problem?id=1985 After hearing about the epidemic of obesity in the USA, Farmer J ...