文章目录

• 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'))

推荐阅读

• 

  构成职务侵占罪会如何追究责任?
• 

  红梅树修剪时间和方法 刚买的红梅盆栽养殖方法
• 

  佳能单反p档操作 佳能p档怎么使用
• 

  给我查一下一月份哪天日子好 查一下日子
• 

  孤独就像烧开的水壶 孤独水壶是什么意思
• 

  美的随风行 美的随风行移动空调不制冷
• 

  出远门核酸检测提前几天做
• 

  单反相机与数码相机的区别有哪些？ 数码相机和单反相机的区别
• 

  济宁什么情况能带押过户？
• 

  《暗黑破坏神3：夺魂之镰》 圣教军FARM练级实用心得
• 

  新冠疫苗|普通人还有多久能接种新冠疫苗？最新回应来了
• 

  春笋怎么保存一周 春笋保存方法家庭
• 

  专家解读 ：个人医保账户里的钱为何少了？
• 

  上古卷轴5天际怎么玩_玩法大全分享
• 

  慢跑可以练出腹肌吗
• 

  idea是用来干什么的，idea后面加是什么意思
• 

  土豆粉一包多少钱 纯土豆粉条多少钱一斤
• 

  韭菜与鸡肉相克吗
• 

  投稿|营收增长难掩资本市场落寞：腾讯音乐“押宝”元宇宙？
• 

  小耳朵奶茶获得教程 小耳朵奶茶活动什么时候结束

• 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