react 中的三大重要属性state refs props

最新推荐文章于 2024-05-15 16:40:47 发布

weixin_30532837

最新推荐文章于 2024-05-15 16:40:47 发布

阅读量214

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/blankOne/p/11469185.html

版权

React中的三大属性还是挺重要的呢

那今天我们就来说一下这React中的三大属性叭！

分别是 state refs props

No.1 ： state

state 它的作用是初始化指令

1 constuctor(){
2     super() // 这是必写的 super
3     
4     this.state = {
5         stateName  : value
6     }
7 }

读取的话就是使用

this.state.stateName

这就是给它初始化值的方式

如果想修改state中的值，在事件成员函数中如何修改state呢

fn(){
    this.setState(){
        stateName : 'newname'
})

不能采用 this.state.属性 = 值这种办法来修改的哦

接下来就是第二个Props 啦

Props 是组件标签上的属性，都纪律在自定义组件中一个props属性上

<Children name='loser' age='21'></Children>

这里在组件上写的属性为 name age 两个属性

那如何访问props呢

<p>{this.props.age}</p>
<p>{this.props.name}</p>

就这样直接获取就可以获取到啦

注意 props 中的值不能改变 state中值的可以改变

这里补充一点点 props中的知识

propstType 和 defaultProps

propsType 是验证props中的数据类型必须合法

defaultProps 是设置props的初始值

这里简单说一下 defaultProps的用法叭

这个是第一种用法；也是经常使用的用法

App.defaultProps = {
    name : 'handsome',
    age : 22
}

这是第二种用法

class App extends React.component{
    static defaultProps = {
        name : 'handsome'
    }
}

那 props 就说完啦，接下来是第三个 Refs

Refs 它就是通过操作虚拟dom来获取真实dom

如何获取真实dom

　　第一种就是 ref 后面是字符串

　　1.给想要获取的元素身上加ref属性

<h3 ref='aa'>Hello World</h3>

aa 这个值就会在 refs 对象中充当一个属性属性值是dom元素

第二种ref 后面是一个箭头函数

<h3 ref={(h3)={this.h3xx = h3}></h3>

h3xx 是一个临时存放dom元素的属性，在这个属性直接挂载在组件对象上

这就是 ref用法

posted on 2019-09-05 19:38 blankOne 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/blankOne/p/11469185.html

关注