javascript代码实例教程-Reactjs中的属性(this.props)

发布时间:2019-01-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Reactjs中的属性(this.props)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

Reactjs中的属性(this.PRops)

一、什么是属性

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

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

二、属性的使用方法

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

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

下面的代码演示了如何使用key/value的形式指定属性: [htML]view plaincopy print?

React.render(

,

document.getElementById('container')

); 可以看到,在自定义的HelloWorld组件中,我们指定了一个name为Jack的属性,在组件中,获取属性的方法如下代码: [html]view plaincopy print?

VARHelloWorld=React.createClass({

render:function(){

return(

Hello,{this.props.name}

);

}

}); 在{}中,通过this.props.name,就可以获取到我们指定的name属性的值了。

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

如下代码所示: [html]view plaincopy print?

为了在HelloWorld组件中定义多个属性,我们首先定义了一个props对象,里面包含两个键值对,然后在标签中,用{...props}的方式为组件传递了这两个属性,这就是JSX中的延展属性,"..."成为延展操作符,这种方式可以很方便地为组件指定多个属性,就相当于下面的代码: [html]view plaincopy print?

React.render(

,

document.getElementById('container')

);

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

React.render()函数执行后,会返回代表组件的一个对象,通过调用这个对象的setProps函数,可以为其指定属性,如下代码: [html]view plaincopy print?

react官方认为,props应该是只读的,不应该被修改。因为 React 不能帮你检查属性类型(propTyPEs)。这样即使你的 属性类型有错误也不能得到清晰的错误提示

Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Reactjs中的属性(this.props)全部内容,希望文章能够帮你解决javascript代码实例教程-Reactjs中的属性(this.props)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。