Reactjs中的属性(this.props)

来源:互联网 发布:骰子软件 编辑:程序博客网 时间:2024/05/19 23:26

一、什么是属性

React官方文档上对于属性的介绍如下:
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。

React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象

二、属性的使用方法

react中主要有下面三种方法来传递属性:

1、直接在组件中使用key/value的形式来指定属性

下面的代码演示了如何使用key/value的形式指定属性:
[html] view plain copy
 print?
  1. React.render(  
  2.     <HelloWorld name="Jack"/>,  
  3.     document.getElementById('container')  
  4. );  
可以看到,在自定义的HelloWorld组件中,我们指定了一个name为Jack的属性,在组件中,获取属性的方法如下代码:
[html] view plain copy
 print?
  1. var HelloWorld = React.createClass({  
  2.     render: function() {  
  3.         return (  
  4.             <div>Hello, {this.props.name}</div>  
  5.         );  
  6.     }  
  7. });  
在{}中,通过this.props.name,就可以获取到我们指定的name属性的值了。

2、使用延展属性为组件指定属性

如下代码所示:
[html] view plain copy
 print?
  1. <script type="text/jsx">  
  2.     var HelloWorld = React.createClass({  
  3.         render: function() {  
  4.             return (  
  5.                 <div>Hello, {this.props.name1}, {this.props.name2}</div>  
  6.             );  
  7.         }  
  8.     });  
  9.     var props = {  
  10.         name1: 'Jack',  
  11.         name2: 'Tom'  
  12.     };  
  13.     React.render(  
  14.         <HelloWorld {...props}/>,  
  15.         document.getElementById('container')  
  16.     );  
  17. </script>  
为了在HelloWorld组件中定义多个属性,我们首先定义了一个props对象,里面包含两个键值对,然后在<HelloWorld>标签中,用{...props}的方式为组件传递了这两个属性,这就是JSX中的延展属性,"..."成为延展操作符,这种方式可以很方便地为组件指定多个属性,就相当于下面的代码:
[html] view plain copy
 print?
  1. React.render(  
  2.     <HelloWorld name1="Jack" name2="Tom"/>,  
  3.     document.getElementById('container')  
  4. );  

3、通过调用组件的setProps函数为组件指定属性

React.render()函数执行后,会返回代表组件的一个对象,通过调用这个对象的setProps函数,可以为其指定属性,如下代码:
[html] view plain copy
 print?
  1. <script type="text/jsx">  
  2.     var HelloWorld = React.createClass({  
  3.         render: function() {  
  4.             return (  
  5.                 <div>Hello, {this.props.name}</div>  
  6.             );  
  7.         }  
  8.     });  
  9.     var instance = React.render(  
  10.         <HelloWorld />,  
  11.         document.getElementById('container')  
  12.     );  
  13.     instance.setProps({name: 'Jack'});  
  14. </script>  
react官方认为,props应该是只读的,不应该被修改。因为 React 不能帮你检查属性类型(propTypes)。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。


(转自:http://blog.csdn.net/yubo_725/article/details/50531817)

原创粉丝点击