react复习二之组件三大核心属性

最新推荐文章于 2021-10-21 10:28:39 发布
最新推荐文章于 2021-10-21 10:28:39 发布
阅读量206 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nieyigo/article/details/114309394
版权

State

状态即state驱动着页面的更新，我们需要把数据放在react的state中，再由react驱动页面，state是react自动实例化类组件的时候传进去的属性
改变状态
复习一下绑定事件的几种方式
监听器
在这里插入图片描述
直接绑定事件
在这里插入图片描述
行内
在这里插入图片描述
在这里插入图片描述
在类中定义的方法，它在局部也就是方法体内会默认帮你开启严格模式，在jsx写的组件里面绑定事件，由于方法是作为绑定事件的回调函数所以不是通过实例调用的，是直接调用，this指向为undefined，要改变此时的this指向使其指向实例自身
在这里插入图片描述
在react中不能直接修改state中的数据，直接更改的话react不认可，修改需要借助内置api也就是setState，这个方法在React.Component的原型对象上
在这里插入图片描述
构造器只触发一次，render则是state状态发生变化就执行一次

对组件进行简化
类中可以直接写赋值语句，例如a=1，等同于往每个类实例身上追加一个名为a值为1的成员
方法用箭头函数的原理是箭头函数的this指向会往外侧寻找，这里的外侧this指向就是Weather的实例对象
在这里插入图片描述
注意点

  1. 组件中render方法中的this为组件的实例对象
  2. 组件自定义的方法中this为undefined，解决方法 ①bind强制绑定this指向②箭头函数(赋值语句)
  3. 状态数据，不能直接修改或更新

Props

当你向组件中传值时
在这里插入图片描述
react会收集并帮你将传进来的值存储在组件实例的props属性中，props是只读的，传值时需要age={18}的形式它才会识别成数字类型的18
在这里插入图片描述
通过this.props即可调用
在这里插入图片描述
下面这种写法是上面这种的语法糖（语法糖可以理解为简写形式）
复习
三点运算符的作用
在这里插入图片描述

三点运算符无法直接展开一个对象，但是外侧包裹一个{}可以复制一个对象，上面语法糖用法是因为babel和react的支持才允许通过拓展运算符展开一个对象并且只适用于标签属性的传递
在这里插入图片描述
这样的用法是修改或添加其中某个同名属性的属性值

如果需要对props传过来的数值进行限制，需要给组件实例添加一个属性propTypes

在这里插入图片描述
或者
在这里插入图片描述
static表示添加在类自身身上而不是类的实例上

注意react16以后类型限制的proptypes是单独的一个包而不是像16以前一样挂载在React上，如果在constructor和super中不接收props会造成props undefined，构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props

Ref

组件内标签可以定义ref属性来标识自己，有些类似于原生js中的id
字符串形式ref，react不推荐使用，效率低
在这里插入图片描述
在这里插入图片描述
获取值则是this.refs.input1.value

回调函数形式ref
定义的回调函数react执行render方法时会自动帮你调用，自动把当前所在节点作为参数传进去，你再把他绑定在实例上，就可以调用了，但是如果内联样式写的话，组件更新的时候会执行两次，第一次为null，第二次才是节点
在这里插入图片描述
createRef
用react自带的函数，调用后返回一个容器，这个容器可以存储被ref标识的节点，等于创建一个容器挂载在实例自身,react渲染到input时react会把那个节点直接装到那个容器中，一个容器只能放一个节点，后放的会顶掉前面放的

myRef = React.createRef()
<Input ref={this.myRef} type="text" />

容器的样子
在这里插入图片描述
所以拿到input就是this.myRef.current.input

react笔记
m0_60525480的博客
03-09 520
1.html文件中引入库：react、react-dom、Babel <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"&gt...
React精讲（二）jsx核心语法
weixin_45704555的博客
10-27 508
小案例-jsx引入 在将jsx核心语法之前，先上来一个案例，复习一下上一讲组件化的内容，“电影列表”: 仍然是在html页面中开发： step1 ：引入依赖（这里不讲了，见上一讲React精讲（一）原生react） step2 ：渲染页面：ReactDOM.render(组件, 将挂载的对象) step3 ：封装组件App: 创建App类，继承React.Component，创建构造方法，构造方法中要用this.state初始化下面要用到的数据movies。以上的准备工作都完成后，就准备在render函数中
React "cannot set property props of undefined"
zhoujiaaw的博客
04-16 4314
在react开发的时候，调用this.props时候，提示说没props (undefined) 如图，在函数中调用props， 调试的时候，网页提示 “cannot read property ‘props’ of undefined” 出现问题的原因是 在调用触发函数的时候，没有对函数进行绑定，这个函数本身用的是其本身的this ，不是全局this。 解决方案就是对函数进...
为什么props接收的值为undefined
weixin_43239880的博客
10-21 7240
在项目中,我们会经常使用到props传值,经常是由父组件传递给子组件一个值,然后我们在子组件中想去使用这个props接收的值,但是在created和mounted中打印,却发现是初始值或者为undefined,并不是我们在父组件中发送异步请求拿到的那个值.但是通过setTimeout设置了一定的时间之后,我们又能拿到对应的值.这是什么情况呢?解决4：使用v-if来判断,这样子在子组件中的created中就可以将有值的transData打印出来了。请求回来的, 请求的这个过程是需要时间的，但是。
React踩坑：TypeError Cannot read property props of undefined
livingsu的博客
06-06 1万+
错误：点击按钮以后想要视情况跳转页面，但是用this.props.history.push()的时候报错TypeError: Cannot read property ‘props’ of undefined 错误原因：没有给函数绑定this，函数内部引用this的时候无法解析出this，也就得不到this的属性props了。 解决方法：在组件的构造函数constructor中添加： this.函数名=this.函数名.bind(this) （注意函数名不能带括号） ...
react-router中this.props.history为undefined?解决报错Cannot read property ‘push‘ of undefined
zrq1210的博客
11-02 5902
在使用this.props.history.push(’/xxx’)的时候遇到这个报错： 大概率原因： 只有用了Route组件，才会在子组件中注入route props(即 history, location, match) 详见官方文档route props 所以下面这个例子中， Header 和 Footer组件中，this.props.history === undefined， 在ModuleA 和 ModuleB中，this.props.history就有值（因为有< Route >
vue 父组件请求数据props为undefined子组件获取不到值。
weixin_40601606的博客
01-30 1699
方法一 在渲染的时候给组件标签上面加一个条件渲染，在父组件请求完成后，将数据赋值，然后将渲染表达式成立 <div> 我是子组件 {{tile}} <div> <script> data(){ return{ tile:"" } }, props:["newtil"], //这里需要注意props["要与父组件中绑定的< :newtil >一致"] mounted(){ th
react-fileupload:react版本的图片上传，支持拖拽和删除，用来复习Drag，Drop，File，XHR2
04-29
这个库充分利用了React的组件化特性，提供了选择、拖拽、删除以及预览图片的功能，极大地提高了用户体验。接下来，我们将详细讨论这个组件背后涉及的核心技术和知识点。 1. **React组件**： React 是Facebook开发...
React面试必备：组件基础与事件机制解析
"这是一份针对前端面试者的React.js面试题集合，包含了2022年最新的React面试问题，旨在帮助准备跳槽的前端开发者更好地理解React组件基础、事件机制等核心概念。" React.js面试题涉及到的知识点非常广泛，这里主要...
43课 React项目第三天（2018.10.18）.rar
09-13
在本课程中，我们将深入探讨React.js，这是...总之，React项目第三天的学习将涵盖React的核心概念和实践技巧，为后续的项目开发打下坚实的基础。通过不断练习和应用，你将能够熟练地使用React构建动态、高效的Web应用。
react类组件关于事件undefined的问题解决方法
m0_46242315的博客
02-24 3345
在react类组件中绑定事件时遇到undefined的问题，可以用以下四种方式解决。 先做个案例，改变按钮的value值 通过箭头函数解决 <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) ...
34.React学习笔记（JSX语法、组件、this.props.children、PropTypes、this.state、组件的生命周期、ajax）
银河与猫的博客
12-25 441
一、HTML模板 使用react的源码大致是这样： <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> ...
vue 父组件请求数据，props为undefined，子组件获取不到值。
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-23 7220
vue 父组件请求数据，子组件获取不到值。props为undefined 解决办法就是 在渲染的时候给组件标签上面加一个条件渲染，在父组件请求完成后，将数据赋值，然后将渲染表达式成立； 示例 子组件A <div> 我是子组件 {{msg}} <div> <script> data(){ return{ m...
React的状态组件和无状态组件及事件this为undefined的解决方法
qq_43551233的博客
02-24 2068
无状态组件： 例如： function My(props){ props.age = 13; return ( <div>my组件{props.age}</div> ) } ReactDOM.render(( <My age={12}></My> ...
react 路由跳转报错TypeError: Cannot read property ‘props‘ of undefined
weixin_46264539的博客
05-22 1275
react 路由跳转报错TypeError: Cannot read property ‘props’ of undefined handleGoReg() { console.log(this.props); this.props.history.push("./register") } 原因是没有给函数绑定this，函数内部引用this的时候无法解析出this，也就得不到this的属性props了。 解决方法1：在组件的构造函数constructor中添
2、Reactjs中的属性（this.props）
热门推荐
大前端程序猿
01-17 2万+
一、什么是属性 React官方文档上对于属性的介绍如下： React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象 二、属性的使用方法
React Native学习笔记-2：this.props.navigator undefined
SiamPig的专栏
02-23 1万+
源码如下：'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, ScrollView, PixelRatio, NavigatorIOS, TextInput, } from 'react-native';class HelloWorld extends Comp
React——props.history 是 undefined
weixin_43848532的博客
05-16 1336
用 withRouter 包裹导出 import { withRouter } from 'react-router-dom' export default withRouter(XXX);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值