文章目录

• React 三大属性
• • state 属性
  • props 属性
  • refs 属性

React 三大属性 state 属性

在React框架中定义了一个状态(State) 概念， 并通过状态(State)来实现React组件的状态机特性。

“状态机” 特性： 就是指 组件通过与用户的交互， 更新实现不同的状态，通过渲染UI保证用户界面和数据一致性 (不需要操作DOM)
应用场景：组件的内容需要根据数据的刷新而刷新
【React|React 组件三大属性】创建方法： 在类的构造函数中定义

this.state={ 属性名：属性值 … }

this：代表当前组件
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
改变state属性状态： setState()方法

• 不能直接修改或更新，只能调用setState（）方法

//1.创建组件 class Weather extends React.Component{ constructor(props){ super(props) //初始化状态 this.state = {isHot:false,wind:'微风'} }render(){ //读取状态 const {isHot,wind} = this.state return 今天天气很{isHot ? '炎热' : '凉爽'}，{wind} }changeWeather(){ //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用 //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用 //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined//获取原来的isHot值 const isHot = this.state.isHot //注意：状态(state)不可直接更改！！！ //this.state.isHot = !isHot //这是错误的写法//注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。 this.setState({isHot:!isHot}) } } //2.渲染组件到页面 ReactDOM.render(,document.getElementById('test'))

问题：会报错 state状态未定义。 即自定义的方法中this为undefined，该this指向存在错误

文章图片

解决this指向问题：

• 组件中render( )方法中的this为组件实例对象
• 组件自定义的方法中this为undefined

1、强制绑定this: 通过函数对象的bind()

//1.创建组件 class Weather extends React.Component{ //构造器调用几次？ ———— 1次 constructor(props){ super(props) //初始化状态 this.state = {isHot:false,wind:'微风'} this.changeWeather = this.changeWeather.bind(this) } //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数 render(){ //读取状态 const {isHot,wind} = this.state return 今天天气很{isHot ? '炎热' : '凉爽'}，{wind} } //changeWeather调用几次？ ———— 点几次调几次 changeWeather(){ const isHot = this.state.isHot this.setState({isHot:!isHot}) } } //2.渲染组件到页面 ReactDOM.render(,document.getElementById('test'))

2、箭头函数 (推荐使用)

//1.创建组件 class Weather extends React.Component { //初始化状态 state = { isHot: false, wind: '微风' } render() { const { isHot, wind } = this.state return 今天天气很{isHot ? '炎热' : '凉爽'}，{wind} } //自定义方法————要用赋值语句的形式+箭头函数 changeWeather = () => { const isHot = this.state.isHot this.setState({ isHot: !isHot }) } } //2.渲染组件到页面 ReactDOM.render(, document.getElementById('test'))

文章图片

props 属性

React框架定义了一个 Props 的概念， 专门用来实现React函数组件接受参数的输入。而React类组件使用React Props参数的方法：React框架为类组件定义了一个默认Props – defaultProps，使用defaultProps默认值来实现React Props应用

props属性：从组件外部向组件内部传递变化了的数据，在组件内部不能改变它的值。但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变
1、读取props中的属性值：this.属性名
2、向props中传值：

• 基本用法：<组件名 属性名1='值1' 属性名2='值2'/ >
• 扩展属性： <组件名 {...实例对象} />

3、设置组件的默认值：组件名.defaultProps={ 属性名：默认值 }
4、属性值的类型限制、必要性限制：

• 导入类型、必要性限制的库：prop-type.js
  
• 格式：
  
  • 在类外定义：类名.propTypes={ 属性名：限制条件 }
  • 在类中定义：static proTypes={ 属性名：限制条件 }

注意：

• 每个组件对象都会有props属性
• 组件标签的所有属性都保存在props中
• 通过标签属性从组件外向组件内传递变化的数据
• 组件内部不要修改props数据，因为是只读的

在类外定义的方式：

//创建组件 class Person extends React.Component{ render(){ const {name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为props是只读的 return (

• 姓名：{name}
• 性别：{sex}
• 年龄：{age+1}

) } } //对标签属性进行类型、必要性的限制 Person.propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 speak:PropTypes.func,//限制speak为函数 } //指定默认标签属性值 Person.defaultProps = { sex:'男',//sex默认值为男 age:18 //age默认值为18 } //渲染组件到页面 ReactDOM.render(,document.getElementById('test1')) ReactDOM.render(,document.getElementById('test2'))const p = {name:'老刘',age:18,sex:'女'} // ReactDOM.render(,document.getElementById('test3')) ReactDOM.render(,document.getElementById('test3'))function speak(){ console.log('我说话了'); }

在类中定义的方式：（简化）

//创建组件 class Person extends React.Component{ constructor(props){ //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props super(props) console.log('constructor',this.props); } //对标签属性进行类型、必要性的限制 static propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 } //指定默认标签属性值 static defaultProps = { sex:'男',//sex默认值为男 age:18 //age默认值为18 } render(){ const {name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为props是只读的 return (

• 姓名：{name}
• 性别：{sex}
• 年龄：{age+1}

) } } //渲染组件到页面 ReactDOM.render(,document.getElementById('test1'))

函数式组件使用props属性：

//创建组件 function Person (props){ const {name,age,sex} = props; return (

• 姓名：{name}
• 性别：{sex}
• 年龄：{age}

) } Person.propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 } //指定默认标签属性值 Person.defaultProps = { sex:'男',//sex默认值为男 age:18 //age默认值为18 } //渲染组件到页面 ReactDOM.render(,document.getElementById('test1'))

props和state属性的区别：

• props 中的数据都是外界传递过来的
• state 中的数据都是组件私有的（通过Ajax获取回来的数据，一般都是私有数据）
• props 中的数据都是只读的，不能重新赋值
• state 中的数据，都是可读可写的
• 子组件只能通过 props 传递数据

refs 属性

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等。
比如：1、给DOM元素添加ref属性，2、给类组件添加ref属性

refs属性：读取组件内部的标签的值

• 在组件内部可以给标签定义ref属性：用于标识标签
  
• 使用 ‘this.refs.标签的ref属性名’ 就可以获取到对应的标签
  
• 用法：
  
  • 字符串形式的 ref （过时）：
    
    
    
  • 回调形式的 ref：
    

    this.input1 = c } />

    
    
  • createRef创建 ref容器（推荐）（版本>=React 16.3）·：
    

    myRef = React.createRef();

    
    
• ref属性 可以挂到任何组件上，可以挂到组件上，也可以是dom元素上：
  
  • 挂载到 组件（有状态组件） 上时，ref返回的是 组件实例的引用
  • 挂载到 dom元素 时，ref返回的是 具体的dom节点

creatRef的使用：

//创建组件 class Demo extends React.Component{ /* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */ myRef = React.createRef() myRef2 = React.createRef() //展示左侧输入框的数据 showData = https://www.it610.com/article/()=>{ alert(this.myRef.current.value); } //展示右侧输入框的数据 showData2 = ()=>{ alert(this.myRef2.current.value); } render(){ return(

  点我提示左侧的数据   

) } } //渲染组件到页面 ReactDOM.render(,document.getElementById('test'))

推荐阅读

• 

  电视剧《七月与安生》中苏家明喜欢的到底是七月还是安生？
• 

  有没有什么可以让牙齿迅速变白的方法？
• 

  不锈钢管生产厂家有哪些 不锈钢管材
• 

  藏獒过剩 流浪藏獒会破坏高原生态雪豹会不会被捕食
• 

  2022-2023独生子女退休补贴新规 独生子女父母一次性补贴如何领取？
• 

  mongodb数据导入 同步mongodb到内存
• 

  linux系统更新内核,亲身体验 升级Linux系统内核完全过程
• 

  9种|9种 MySQL数据库优化的技巧
• 

  阿拉伯王子成名的机会或重现
• 

  爱普生供墨清零软件
• 

  药丸形|曝料：iPhone 14 Pro概念渲染图！“感叹号”挖孔屏
• 

  excel排序让后面的数据跟着动教程
• 

  山东省综合素质评价登录入口手机版 山东省综合素质评价登录入口
• 

  毛衣巧处理再穿不会痒 毛衣的日常护理法则
• 

  献给电脑族的呵护肌肤的7大方法
• 

  德国即热式电热水器,你知道什么原因吗
• 

  华润燃气热水器使用方法,不清楚的真可以看看
• 

  月饼的馅料有哪些 传统月饼的馅料有哪些
• 

  上等人 马龙等人如何处罚，下等人
• 

  运动塑身减肥的方法有哪些视频 运动塑身减肥的方法有哪些

• react|react-router-dom v6 使用
• React|react-router-dom V6
• React|React组件三大核心属性(二)——props
• react|React 组件与组件实例的三大属性
• react技术栈及全家桶|react-router-dom v6 版本使用内容详解
• #|React组件实例的三大属性
• react.js|react-router-dom V6的配置使用
• react|react 路由（react-router-dom 的使用）
• React报错之Style prop value must be an object