一、

不推荐用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种设置方式的更多相关文章

  1. AutoLayout的三种设置方式之——NSLayoutConstraint代码篇

    AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下. 在说三种设置方式前,我们先简单的说一下autolayou ...

  2. Webdriver实现下载功能，屏蔽掉windows弹出的对话框，FireFox下设置浏览器的属性，两种实现方式：

    一.使用一个全新的FireFox浏览器打开Web应用,浏览器不带任何插件,也未对浏览器做任何默认配置,但需要对浏览器属性进行配置 // 获取浏览器的所有配置文件 ProfilesIni allProf ...

  3. 关于搜索elasticsearch的数据条数大于10000的坑 max_result_window的两种设置方式

    当用elasticsearch进行深度分页查询时的size-from大于10000的时候,就会报错“”, 官方推荐是scroll查询返回结果是无序的不满足业务需求,所以还是通过设置最大返回结果数来达到 ...

  4. UITableView和UICollectionView的Cell高度的几种设置方式

    UITableViewCell 1.UITableView的Cell高度默认由rowHeight属性指定一个低优先级的隐式约束 2.XIB中可向UITableViewCell的contentView添 ...

  5. JavaWeb关于session生命周期的几种设置方法

    一般session的生命周期都是建立在用户登录系统后对用户信息进行一个记录,session类似于你有一张银行卡,而卡里的钱就是属于session存储的信息,卡掉了就不能取出里面的钱. 以前sessio ...

  6. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. Android L Camera2 API 使用实例程序汇总

    在网上发现几个使用Camera API2开发的实例程序,总结一下方便后续参考: 1.Camera2 Basic : https://github.com/googlesamples/android-C ...

  2. Kibana4学习<二>

    生产环境部署 Kibana4 是是一个完整的 web 应用.使用时,你需要做的只是打开浏览器,然后输入你运行 Kibana 的机器地址然后加上端口号.比如说:localhost:5601 或者 htt ...

  3. Asp.net开启分布式事务管理

    1.确保服务器分布式管理服务 Distributed Transcation Coordinator 有开启 2.使用分布式事务代码的项目中添加System.Transactions程序集的引用 3. ...

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

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

  5. 【Tsinsen】【A1365】森林旅店

    KD-Tree 啊哈~检验了一下自己KD-Tree的学习情况,还算可以,模板至少是记下来了. 支持插入(所以要带重建),查询最近的P个点的距离. 然而题目并没有说是按怎样的顺序输出这P个点?...(事 ...

  6. 堆(heap)和栈(stack)的区别

    转: 一.预备知识―程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)― 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中 ...

  7. Leetcode#105 Construct Binary Tree from Preorder and Inorder Traversal

    原题地址 基本二叉树操作. O[       ][              ] [       ]O[              ] 代码: TreeNode *restore(vector< ...

  8. string为什么可以写入共享内存

    我今天在想这个vector,map为什么不能写入共享内存,原来是因为new的时候只是new了这个对象在共享内存上,而真正的堆上的内存并没有在共享内存里面的,如果要想vector 可以共享就要重写分配器 ...

  9. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

  10. XSS的原理分析与解剖（一）

    0×01 前言: <xss攻击手法>一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的<白帽子讲WEB安全>和cn4rry的<XSS跨站脚本攻击剖析 ...