react的三大属性 state props  refs

  • props 来自外部属性
  • states 来自内部状态
  • refs 用于表示组件内某个元素

state基础（最重要的属性）

  • state是组件对象最重要的属性，其值是对象，即可以包含多个数据
  • 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）

state 操作　　

　　初始化状态　

  1. constructor(props){
  2.     super(props)
  3.     this.state = { //this是一个组件对象
  4.         stateProp1: value1,
  5.         stateProp2: value2
  6.     }
  7. }

　　　

　　读取某个状态值

  1. this.state.statePropertyName

　　

　　更新状态，组件界面更新

  1. this.setState({
  2.     stateProp1: value1,
  3.     stateProp2: value2
  4. })

state属性示例–监听点击事件，然后状态改变

定义组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="test"></div>
  11.  
  12.     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  13.     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  14.     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  15.  
  16.     <script type="text/babel">
  17.  
  18.        class Myname extends React.Component {
  19.         constructor (props) {
  20.                 //调用父类的构造函数
  21.                 super(props)
  22.                 //1、初始化状态——固定写法
  23.                 this.state = {
  24.                     isMyname: true
  25.                   }
  26.                 //[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法
  27.                 this.change = this.change.bind(this)
  28.  
  29.             }
  30.             //新增自定义方法:内部的this默认不是组件对象，而是undefined
  31.             change () {
  32.                 //3、更新状态，需要让this指向组件对象
  33.                this.setState({
  34.                 isMyname: !this.state.isMyname
  35.               })
  36.             }
  37.             //重写组件类方法
  38.             render () {
  39.  
  40.                 const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'
  41.                 return <h2 onClick={this.change}>{text}</h2>
  42.               }
  43.         }
  44.         ReactDOM.render(<Myname />, document.getElementById('test'))
  45.  
  46.     </script>
  47. </body>
  48. </html>

props 属性

作用：复用

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="test1"></div>
  11.     <div id="test2"></div>
  12.  
  13.     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  14.     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  15.     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.  
  18.     <script type="text/babel">
  19.  
  20.     //    1、定义组件:方式1
  21.     function Person(props) {
  22.         return (
  23.             <ul>
  24.                 <li>name：{props.name}</li>
  25.                 <li>age：{props.age}</li>
  26.                 <li>sex：{props.sex}</li>
  27.             </ul>
  28.         )
  29.     }
  30.     //方式2：使用类方式定义组件（运行时请将其中一个方式注释）
  31.     class Person extends React.Component {
  32.         render() {
  33.             return (
  34.                 <ul>
  35.                 <li>name：{this.props.name}</li>
  36.                 <li>age：{this.props.age}</li>
  37.                 <li>sex：{this.props.sex}</li>
  38.             </ul>
  39.             )
  40.         }
  41.     }
  42.     //指定默认值
  43.     Person.defaultProps = {
  44.         name:'imaginecode',
  45.         age: 17,
  46.         sex:'woman'
  47.     }
  48.     //指定属性值的类型和必要性--使用prop-types.js库
  49.     Person.propTypes = {
  50.         name:PropTypes.string.isRequired,
  51.         age:PropTypes.number.isRequired,
  52.     }
  53.  
  54.     // 2、渲染组件标签
  55.     const p1 = {
  56.         name:'imaginecode',
  57.         age: 19,
  58.         sex:'man'
  59.     }
  60.  
  61.     ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));
  62.     const p2 = {
  63.         name:'imaginecode2'
  64.     }
  65.  
  66.     ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));
  67.     </script>
  68. </body>
  69. </html>

　　为组件指定默认属性值，组件属性defaultProps：

  1. Person.defaultProps = {name:''}

　　

　　对props中的属性值进行类型限制和必要性限制,组件属性propTypes：

  1. Person.propTypes = {
  2.     name:PropTypes.string.isRequired,
  3.     age:PropTypes.number.isRequired
  4. }

　

refs 属性

（1）ref用于标识组件内部某个元素

（2）refs 是标识集合

　示例　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="text1"></div>
  11.     <div id="text2"></div>
  12.  
  13.     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  14.     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  15.     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.  
  18.     <script type="text/babel">
  19.         //1、先定义组件
  20.         class InputComp extends React.Component {
  21.             constructor(props) {
  22.                 super(props)
  23.                 //先对自定义函数进行bind操作
  24.                 this.showInput = this.showInput.bind(this);
  25.                 this.handleBlur = this.handleBlur.bind(this);
  26.  
  27.             }
  28.             showInput(event) {
  29.                 console.log(this);
  30.                 alert(this.inputVal.value);
  31.             }
  32.             handleBlur(event) {//利用所有的事件均有一个event属性
  33.                 alert(event.target.value);
  34.             }
  35.             render() {
  36.                 return(
  37.                     //this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素
  38.                     <div>
  39.                         <input type="text" ref={input => this.inputVal=input}/>
  40.                         <button onClick={this.showInput}>点击获取值</button>
  41.                         <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
  42.                     </div>
  43.                 )
  44.             }
  45.         }
  46.         //2、渲染组件标签
  47.         ReactDOM.render(<InputComp />,document.getElementById('text1'));
  48.     </script>
  49. </body>
  50. </html>

react的三大属性的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

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

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

  5. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. React Native声明属性和属性确认

    属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...

随机推荐

  1. [bug] SpringBoot 集成 jsp，访问时页面报Whitelabel Error Page

    参考 https://bbs.csdn.net/topics/392187702

  2. [bug] flink on yarn 启动失败

    参考 https://www.cnblogs.com/huangguoming/p/11732663.html

  3. 安装SpecCPU2006 on Linux of CentOS6.3, gcc4.4.7

    安装SpecCPU2006 on Linux of CentOS6.3, gcc4.4.7 由于在tools/bin目录中只有ia64-linux,所以在直接运行./install.sh脚本时,系统会 ...

  4. 013.Ansible Playbook include

    一 include 当项目越大,tasks越多的时候.如果将多有的task写入一个playbook中,可读性很差,就需要重新组织playbook 可以把一个playbook分成若干份晓得palyboo ...

  5. 76-Java安装Eclipse并创建第一个HelloWorld.md

    76-Java安装Eclipse并创建第一个HelloWorld.md 首先确定已经安装Java系统环境,若未安装,请参考博客Java环境windows搭建 访问Eclipse官网 下载完成直接发送快 ...

  6. Java和JDK版本的关系-(转载)

    JAVA的版本最开始是1995年的JDK Alpha and Beta版本,第二年发布JDK1.0版本之后就是JDK1.1,JDK1.2.到1998年,不再叫JDK了,而是叫J2SE,但是版本号还是继 ...

  7. git/repo常用命令

    Git作为广受欢迎的一款版本控制工具,它该如何通过命令行使用呢?本文为你揭晓浓缩精华精华版:git常用命令一览,含部分repo操作. 代码下载 repo init -- -->初始化需要下载的分 ...

  8. 3d分层悬停效果

    3d分层悬停效果 写在前面 经过了2个星期的努力,我回来了!会继续将我学习路上遇到的问题,以及一些笔记,demo分享给大家 实现效果 致我最爱的backpink 实现思路 将6张图片,通过定位叠在一起 ...

  9. 详述盒子模型（包含padding、border、margin的详细用法和描述）

    提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置 ...

  10. python解析ua

    一个非常神奇的包可以帮助我们优雅的解析浏览器的UA,他的名字叫做user_agents pip install pyyaml ua-parser user-agents >>>ua_ ...