React属性的3种设置方式
一、
不推荐用setProps，因为以React的设计思想相悖，推荐以父组件向子组件传递属性的方式
二、3种用法的代码
1.键值对
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/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>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
</script>
</body>
</html>
2.{...props}展开属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/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>Hello, {this.props.name1 + ' ' + this.props.name2}</p>;
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {
name1: 'Tim',
name2: 'John',
};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld {...this.state}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
</script>
</body>
</html>
3.setProps方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/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>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
});
var instance = React.render(<HelloWorld></HelloWorld>, document.body);
instance.setProps({name: 'Tim'});
</script>
</body>
</html>
React属性的3种设置方式的更多相关文章
- AutoLayout的三种设置方式之——NSLayoutConstraint代码篇
AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下. 在说三种设置方式前,我们先简单的说一下autolayou ...
- Webdriver实现下载功能，屏蔽掉windows弹出的对话框，FireFox下设置浏览器的属性，两种实现方式：
一.使用一个全新的FireFox浏览器打开Web应用,浏览器不带任何插件,也未对浏览器做任何默认配置,但需要对浏览器属性进行配置 // 获取浏览器的所有配置文件 ProfilesIni allProf ...
- 关于搜索elasticsearch的数据条数大于10000的坑 max_result_window的两种设置方式
当用elasticsearch进行深度分页查询时的size-from大于10000的时候,就会报错“”, 官方推荐是scroll查询返回结果是无序的不满足业务需求,所以还是通过设置最大返回结果数来达到 ...
- UITableView和UICollectionView的Cell高度的几种设置方式
UITableViewCell 1.UITableView的Cell高度默认由rowHeight属性指定一个低优先级的隐式约束 2.XIB中可向UITableViewCell的contentView添 ...
- JavaWeb关于session生命周期的几种设置方法
一般session的生命周期都是建立在用户登录系统后对用户信息进行一个记录,session类似于你有一张银行卡,而卡里的钱就是属于session存储的信息,卡掉了就不能取出里面的钱. 以前sessio ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 程序开发心理学阅读笔记——第I篇
1.软件的任务是为了解决某一特定的问题,而软件开发者的任务却需要解决一系列问题.2.温伯格说,我们不能要求每个人都聪明异常,能够解决所有难题:但是我们必须持续思考,因为只有如此,我们才能明白自己在做什 ...
- LNMP系列网站零基础开发记录（一）
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- MVC4 网站发布(整理 + 部分转载 + 部分问题收集和解决方案)
网站发布步骤: 这部分是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接 ...
- BZOJ 4500: 矩阵 差分约束
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=4500 题解: 从行向列建边,代表一个格子a[i][j],对每个顶点的所有操作可以合并在一 ...
- Codeforces Round #349 (Div. 1) B. World Tour 最短路+暴力枚举
题目链接: http://www.codeforces.com/contest/666/problem/B 题意: 给你n个城市,m条单向边,求通过最短路径访问四个不同的点能获得的最大距离,答案输出一 ...
- rivers ioi2005 树形dp
说句实话,写完这道题,很想吐一口血出来,以示我心情的糟糕: 题目很简单,树形dp,正常做30分钟,硬是做了好几个小时,真是伤心. 题解不写了,只是吐个槽,网上没有用背包写的dp,全是左儿子右兄弟写法, ...
- switch语句的使用，非常好
这是谭浩强课本上枚举类型的例子,但是我贴这个例子的代码不是因为枚举类型,是因为这个代码使用switch语句用得非常好,值得一贴. 题目是这样的:有红.黄.蓝.白.黑5中颜色的球若干,依次取出3个球,求 ...
- 【转】Sublime text 3 中文文件名显示方框怎么解决
引用自:http://www.zhihu.com/question/24029280 如图,中文文件名打开全是乱码,内容倒是装了converttoutf8没什么太大的问题. 这个是sublime te ...
- SOA之（3）——面向服务计算基础
面向服务计算基础(Service-Oriented Computing Fundamentals) 面向服务的计算(Service-Oriented Computing) 面向服务的计算是一个伞状术语 ...
- response ,request编码
request.setCharacterEncoding()是你设置获得数据的编码方式.response.setCharacterEncoding()是你响应时设置的编码.response.setCo ...