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

向右看齐 2023-06-03 04:54 41阅读 0赞

[react 中的 三大重要属性state refs props][react _ _state refs props]

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元素

![loading.gif][]

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

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

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

![loading.gif][]

这就是 ref用法

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

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

[react _ _state refs props]: https://www.cnblogs.com/blankOne/p/11469185.html
[loading.gif]: /images/20230601/f6a61b318605414391a3b6e528407ade.png
[blankOne]: https://www.cnblogs.com/blankOne/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11469185

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件三大属性state，props，refs

[1. React组件定义][1. React] [1.1 函数组件（Function Components）][1.1 _Function Co

以你之姓@/ 2024年03月17日 17:16/ 0 赞/ 80 阅读

相关 React组件的props属性、state属性、refs属性详解

React组件属性 1、`props`属性 react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但

野性酷女/ 2023年07月11日 11:03/ 0 赞/ 6 阅读

相关 React从入门到项目--第二天（React三大属性state，props，ref）

今天了解到了React的三大属性，分别是state，props还有ref。三大属性是必不可少的，而且这三大属性，和vue中的三个属性差不多，有很大的相似之处。 state

﹏ヽ暗。殇╰゛Y/ 2023年06月06日 13:28/ 0 赞/ 43 阅读

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

[react 中的三大重要属性state refs props][react _ _state refs props] React中的三大属性还是挺重要的呢那今天我们

向右看齐/ 2023年06月03日 04:54/ 0 赞/ 42 阅读

相关 React 三大属性state,props,refs以及组件嵌套的应用

React 三大属性state,props,refs以及组件嵌套的应用该项目实现了一个简单的表单输入添加列表的内容 ![1][] ![2][] 代码如下

男娘i/ 2023年02月23日 03:36/ 0 赞/ 128 阅读

相关 React —— 组件实例的三大核心属性 state，props，refs

React —— 组件实例的三大核心属性 state，props，refs React —— 组件实例的三大核心属性 state，props，refs

﹏ヽ暗。殇╰゛Y/ 2022年11月07日 14:47/ 0 赞/ 233 阅读

相关 ② React 面向组件编程(state、props、refs)、事件处理

查看专栏其它文章： [① React 介绍及JSX简单使用][React _JSX] -------------------- React 组件的理解

深藏阁楼爱情的钟/ 2022年10月28日 14:22/ 0 赞/ 217 阅读

相关 React学习笔记三——组件三大属性state、props和refs详解

state 1.类中方法this的指向 constructor和render里的this指向类组件的实例对象在类组件内部定义的普通函数，作为onClick

素颜马尾好姑娘i/ 2022年10月09日 03:06/ 0 赞/ 241 阅读

相关组件实例的三大属性state,props,refs

组件实例的三大属性 state 我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI

布满荆棘的人生/ 2022年09月01日 08:28/ 0 赞/ 233 阅读

相关理解react中的props和state

Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。 State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合； pro

港控/mmm°/ 2022年05月25日 12:24/ 0 赞/ 387 阅读