Reactjs中的属性(this.props)
来源:互联网 发布:骰子软件 编辑:程序博客网 时间:2024/05/19 23:26
一、什么是属性
React官方文档上对于属性的介绍如下:
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。
React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象
二、属性的使用方法
react中主要有下面三种方法来传递属性:
1、直接在组件中使用key/value的形式来指定属性
下面的代码演示了如何使用key/value的形式指定属性:
可以看到,在自定义的HelloWorld组件中,我们指定了一个name为Jack的属性,在组件中,获取属性的方法如下代码:
在{}中,通过this.props.name,就可以获取到我们指定的name属性的值了。
2、使用延展属性为组件指定属性
如下代码所示: 为了在HelloWorld组件中定义多个属性,我们首先定义了一个props对象,里面包含两个键值对,然后在<HelloWorld>标签中,用{...props}的方式为组件传递了这两个属性,这就是JSX中的延展属性,"..."成为延展操作符,这种方式可以很方便地为组件指定多个属性,就相当于下面的代码:
3、通过调用组件的setProps函数为组件指定属性
React.render()函数执行后,会返回代表组件的一个对象,通过调用这个对象的setProps函数,可以为其指定属性,如下代码:
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。
(转自:http://blog.csdn.net/yubo_725/article/details/50531817)
阅读全文
0 0
- 2、Reactjs中的属性(this.props)
- Reactjs中的属性(this.props)
- Reactjs中的属性(this.props)
- ReactJs中的this.props.children总结
- ReactJs中的this.props.children总结
- reactjs新手篇this.props
- ReactJS学习系列课程(props 组件属性)
- React Native的this.props获取属性
- ReactJS修炼之路(三):props vs state
- reactjs入门到实战(五)---- props详解
- reactjs(四)props的作用
- react demo6 (设置组件自身属性this.props)
- react demo7 (设置组件自身属性...this.props)
- react demo8 (设置组件自身属性this.props.children)
- React学习(五)this.props.children
- ReactNative学习之Props(属性)
- React学习(二)props属性
- reactjs中props和state最佳实践
- 万能适配器(二)
- 分析一下到底是上升沿还是下降沿读写数据
- Redis详细介绍
- Python2.7抓取豆瓣美女图片
- Java常用类之日期类Date DateFormat and SimpleDateFormat
- Reactjs中的属性(this.props)
- Java集合之ArrayList
- chapter02
- crackMe的逆向分析
- 【Android学习】网络通信----以HttpURLConnection Post请求为例
- UVa Spreading the Wealth-11300(数学推导+中位数)
- AtomicReference(无锁的对象引用)与AtomicStampedReference与(带有时间戳的对象引用)
- JAVA学习日记----------
- 1008. 数组元素循环右移问题 (20) Python 2编译