2020/02/16 03-组件属性props

最新推荐文章于 2022-12-28 14:26:46 发布
最新推荐文章于 2022-12-28 14:26:46 发布
阅读量294 收藏
点赞数
分类专栏： 55前后端分离博客项目(一)react框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/104345931
版权

每个react组件你内部都维护了一个state，state要定义必须是一个对象类型，就是{}大括号里面是kv对，这就是js里的定义，如果state发生变化，就会影响组件本身，自己就会调用render函数。
只要知道state变化，render函数调用，变化调用render函数，就会按照你的要求绘制，这个绘制并没有在网页中绘制，只是在虚拟dom中吧需要修改的修改，在虚拟dom和dom之间比较，在需要变化的时候去更待dom树上的节点，浏览器在对应的dom上做修改，局部渲染即可
在这里插入图片描述
state最简单定义成这样，但是不够规范
在这里插入图片描述
state改变不应该放在render函数里，应该放在事件里，setState使用的时候一样在里面放对象，会把属性名相同的做替换
在这里插入图片描述
要用JSX表达式，在表达式中进行提取即可
在这里插入图片描述
用setState一般做这种方式，虽然可以，但是要少用，因为修改state后会频繁的进行调用，虽然要比较但是还是浪费了浏览器资源，浪费事件去比较
在这里插入图片描述
每一个显示在网页中的元素，可以设定name，id这些属性的，还可以设定事件响应的属性，键盘鼠标响应，比如失去焦点，这些常见的事件可以放在某些元素上，这个元素当它产生某些事件之后就会调用关联的函数，这个函数习惯称为回调函数，这个函数里应该有event，event是由js写入的时候是由浏览器捕捉到这个事件，由它替你注入进去，作为第一个参数
在这里插入图片描述
这个参数可以从函数自动把值拿出来，拿回来，event.target就可以拿到这个元素
在这里插入图片描述
元素虽然拿到了，这个函数中有可能this会出问题，如果用target来找触发事件这个东西，把里面的值改掉，this就算错了也没关系，event给你就是个对象了，不管this不this了，不需要这么做
在这里插入图片描述
getelementid，一般元素ID只有一个，如果event.target正好是它，就可以省的getelementid，不用遍历dom树了
在这里插入图片描述
通过点击让toggle组件里面的state值发生变化，发生变化引起render，render去写入值

在这里插入图片描述
字符串可以toString，在对象上可以表达字符串形式，直接调用tostring就ok，布尔值直接用tostring打印不出来
在这里插入图片描述
在这个类里要用this，但是这里执行this就不对 了，所以用bind或者箭头函数来解决在这里插入图片描述
再handle函数中对state进行修改时没有问题的
在这里插入图片描述
到底刷新不刷新网页，要看虚拟dom是否发生变化

在这里插入图片描述
在这里插入图片描述
react事件都是小驼峰的，我们需要指定的是事件处理函数，可以用bind返回new function。可以使用event.preventDefault阻止默认行为，比如原来跳转链接，现在阻止跳转了
在这里插入图片描述

组件之家需要传输数据用到的东西。props，
在这里插入图片描述
getelemenrid找的是这个，getelementname找的也是这个，习惯用的是id
在这里插入图片描述
props就是指的是标签谁等于谁的属性，这个parent根本不是标准的属性，这个是toggle框架下临时自己定义的，{}这个表达式得到的值赋值给 了parent，
props是所有属性的集合，把这些属性包装起来赋值给props
在这里插入图片描述
以后i访问props，this.props.name，this.props.parent就可以取到了在这里插入图片描述
这些是组件定义在这里插入图片描述
**在root里的this就是root，所以把root组件的实例传进去了，传到里面的组件，里面的组件就可以通过props来访问了。
**
在这里插入图片描述
在这里插入图片描述
这个this在class的作用域范围内,这个this只可能代表这个组件不可能代表其他组件，所以把ROOT组件的实例传进去this，传到里面的组件，里面的组件就可以访问props来打印
在这里插入图片描述
接下来取这个内容，直接把这个拼在一起，这个this是root
在这里插入图片描述
hr水平线，br换行符
在这里插入图片描述
属性的访问要通过这个组件，这个组件有一个props在这里插入图片描述
这个props就是通过这个方式来获得的属性
在这里插入图片描述
通过属性传进去了，parent是自己定义的属性名。
在这里插入图片描述
试试+号
在这里插入图片描述
**parent相当于root里的this，这个this里有state，在它state里有p1和p2 把p1和p2拼接在一起
**
在这里插入图片描述
这样也可以
在这里插入图片描述
知道字符串就使用concat，最保险
在这里插入图片描述
这样封口就可以在里面加东西
在这里插入图片描述
在这里插入图片描述
现在是没有的
在这里插入图片描述
放到这里是有的

在这里插入图片描述在这里插入图片描述
在这里也称为属性
在这里插入图片描述
上面如何使用这样的子属性在这里插入图片描述
在这里插入图片描述

在这里插入图片描述parent提供 了内部固定的children，但是除了children之外，你想用父组件，没提供，
在这里插入图片描述
parent是自己写的属性，通过这个属性，将你想要的数据传进去
在这里插入图片描述
写成this。state在这里插入图片描述
试试现在能否这样访问
在这里插入图片描述
没问题
在这里插入图片描述
有了this就可以控制父组件的任何东西

在这里插入图片描述
加上这个其实会变化的
在这里插入图片描述
在这里插入图片描述
修改成这样
在这里插入图片描述
对于这个对象来讲不能设定只读属性的name

在这里插入图片描述
对于state可以用setState来修改这些属性，对于props，所有属性不能修改，是只读的，一修改就提示你不允许，也就是props拿到以后，从外部传进来
在这里插入图片描述
这种方式传进来的一般不修改，直接拿来用
在这里插入图片描述
把这里删掉，试试props能否修改

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
也就是现在把state改了就可以了，把父组件的改掉
在这里插入图片描述
试试按能否得到父组件在这里插入图片描述
波浪线前面打了个root
在这里插入图片描述
现在相当于通过父的来更改
在这里插入图片描述
父state发生了变化，也会调用render，也就是传给子组件的props也变了
在这里插入图片描述
属性变了

在这里插入图片描述
props发生变化也会引起整个组件的刷新
在这里插入图片描述
这一句会打印当前props现在的name
在这里插入图片描述在这里插入图片描述
分析下流程，点击子组件的渲染，触发了一个click事件，会立即调用handleclick，handelclick按照我们的要求进行打印
在这里插入图片描述这个this是子组件，组件更改了setstate，引起了render，
在这里插入图片描述
通过parent传给了父组件，把组件拿出来设定了state值，在子组件修改了父组件
在这里插入图片描述
父组件会触发render，引起重绘在这里插入图片描述
上面也会引起重绘
在这里插入图片描述
两个都重绘，react框架会保证你一遍过去
按照道理是有两回，但是这里只有一回，这就是框架替我们做的
在这里插入图片描述
通过props拿到 了从外部传入的属性，我们自发在子组件点击的是click
在这里插入图片描述
我们本身是让自己的state发生变化就需要渲染，但是在这个函数里又对父组件做了操作，把父组件的state引起了变化，父组件的render函数也要调用，也会引起自己的重绘，也包含了子组件也要重绘，也把子组件的props改了
在这里插入图片描述
也就是这句把name改了
在这里插入图片描述
这家伙从判断要渲染两次，但是从结果来看只有一次
在这里插入图片描述
props是从组件外部传进来，而且传到组件内部，在内部不允许修改
在这里插入图片描述
state必须在内部，才可以修改的，state是可以修改的，建议使用setState，一个管内部，一个管外部传进来
在这里插入图片描述
，把这些放开，会有更有意思的现象
在这里插入图片描述
在这里插入图片描述
这个是root组件在这里插入图片描述
怕有坑，可以用bind
在这里插入图片描述
++是和+1是有区别的，++是指在变量自身位置上自增，+1是放到栈里+完再放回去
在这里插入图片描述
父组件一点击会count+，子组件点击后，会修改flag
在这里插入图片描述
现在注释掉，就不去操作父组件了
在这里插入图片描述
点一下父组件，调用了sub render
在这里插入图片描述
点击子组件
在这里插入图片描述
style是行样式表，所以告诉表达式，这里加注释需要这么写
在这里插入图片描述
这样加注释解析不了
在这里插入图片描述
最外面大括号是表达式，里面是定义了一个对象
在这里插入图片描述
在这里插入图片描述
灰色的框就代表接收鼠标事件的范围，子组件的大小
在这里插入图片描述
在这里插入图片描述
这个是子组件范围
在这里插入图片描述
现在把事件从div挪走，改成一个span，也就是点击span才有变化，继续给一个style
在这里插入图片描述在这里插入图片描述

这样比较鲜明的对比，白色
在这里插入图片描述
现在把onclick放到了span上面，只有span才能接收，但是root，只要在这里点，都归它管，数字更新，子组件也是它的组件
在这里插入图片描述
点白色的区域两个一起变

在这里插入图片描述
这个事件确实是在子组件收到的，react把它交给子组件，又交给了父组件
在这里插入图片描述
打印一下容易区分一点

在这里插入图片描述
在这里插入图片描述
现在重新开始，点一下子组件部分会产生一个click事件，它先把事件传给了子组件，这个事件还继续传递，这个事件也是属于父组件的范围，这两个就分别调用了各自的click
在这里插入图片描述
在子组件敲的click首先到达这里在这里插入图片描述
然后往上传到父组件的click，就也调用了在这里插入图片描述
在这个函数中把state也改变了，父的state也改变了

在这里插入图片描述
改变了state，父就要render
在这里插入图片描述
所以子组件render一次就够了，一般不会让子组件和父组件都接收click
在这里插入图片描述
超过子组件范围点击
在这里插入图片描述
root管之后，迫使sub也管，不过没关系，虚拟dom没改变
在这里插入图片描述
所以不变的不变，只要把计数渲染即可
在这里插入图片描述

元素里面叫padding，外面的叫margin
在这里插入图片描述
在这里插入图片描述
不能不写单位
在这里插入图片描述
应该写成px
在这里插入图片描述
在这里插入图片描述
太大了，稍微小点
在这里插入图片描述
审查元素显示了padding为20在这里插入图片描述在这里插入图片描述
把里面的内容挤成20

在这里插入图片描述
在这里插入图片描述白色的是span点击了才会click
在这里插入图片描述
在白的外面点一点用也没有
在这里插入图片描述
重点学会state，学会props
在这里插入图片描述
现在这里比较丑
在这里插入图片描述
构造器

在这里插入图片描述
现在执行就报错了
在这里插入图片描述
this在super前是不允许
在这里插入图片描述
constructor，只要继承这个组件，就有一个参数必须写，props
在这里插入图片描述
为父组件传进去props即可

在这里插入图片描述
props外面这么用的时候传进去了，由react内部替你实现，会把这些属性注入到props里去
在这里插入图片描述
这个由react来实现，把这些属性注入到props里去
在这里插入图片描述
用的时候就直接props了
在这里插入图片描述
以前要用是this.props
在这里插入图片描述

在这里就直接写props
在这里插入图片描述
离开这个方法在其他里面应该直接用这个形参即可
在这里插入图片描述
只要extends，不过不加super，用this就立马报错
在这里插入图片描述
发现父组件渲染，子组件也会渲染一次，子组件会不会渲染就看变没变

在这里插入图片描述
在这里插入图片描述
这里是children
在这里插入图片描述

props里的值不允许修改，是read only。
state是组件自己的属性，组件外部是无法直接访问的，可以修改，但是建议在组件外调用，需要先把组件拿到， 不管什么方式都需要传给它，传了之后，调用setState方法。
props是public属性，组件外可以访问，但是只读。
组件外引起变化，也会导致组件内部进行render
在这里插入图片描述
组件外定义外部，state在组件内部

在这里插入图片描述

这两个结合起来就是状态管理
在这里插入图片描述
构造有一参是props，props继续向父组件传，因为需要
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

48N6E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
storybook-addon-props：React Storybook Addon将组件属性和故事显示到面板中
02-03
显示组件属性（由使用提取） 故事。 显示故事说明和源代码。 可见信息类似于插件，但不会将故事的输出更改为预览区域。 这将为功能提供更好的用法，因为快照将仅包含渲染的故事。 安装 npm i storybook-addon-...
vue3中遇到的问题
weixin_59017683的博客
09-30 2225
vue3项目中一写方法及问题总结
Props 的只读性
jean_0920的博客
08-31 941
Props 的只读性 组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。来看下这个 sum 函数： function sum(a, b) { return a + b; } 这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。 相反，下面这个函数则不是纯函数，因为它更改了自己的入参： function withdr...
[Vue3] 关于vue3+ts中使用props进行 interface 类型限制设置默认值报错问题(props: Readonly＜Props＞))
扛麻袋的少年的博客
12-28 6748
Type '{}' is not assignable to type '(props: Readonly) => object'. Type '{}' provides no match for the signature '(props: Readonly): object'
iview table控件在render函数里设置DOM属性值的方法
Queen-Shir的博客
01-07 802
columns:[ { title: '员工头像', key: 'a', render:(h,params) =>{ return h('div',{ style: { width: '100%', height:"120px", display: "flex","justify-content": "flex-start","align-it.
记录下使用uniapp编写的APP转小程序所遇问题
weixin_42323421的博客
02-09 1518
1. id 作为属性保留名，不允许在自定义组件中定义为 props 2.<template> cannot be keyed. Place the key on real elements instead. // 这种错误提示表示template不是真实的标签元素，不要在上面使用v-for 3. :title-style||:style="",这种样式的动态判断定义一个方法放在methods中 4. click事件不要加.native，加上后点击事件不起作用 5. v-for="(item, n
react-props-classnames:轻松将组件的props转换为类名
05-14
yarn add react-props-classnames 例子 用法 import styled from 'styled-components' ; import createPropsTransform from 'react-props-classnames' ; const propsTransform = createPropsTransform ( { prefix :...
Vue 使用Props属性实现父子组件的动态传值详解
10-16
今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件选项props实例详解
08-29
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
简单理解vue中Props属性
11-28
本文实例为大家解析了vue中Props的属性，供大家参考，具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件...
Vue中的Props(不可变状态)
10-17
主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element tabs 的tab-click点击事件怎样取到更多参数
热门推荐
weixin_41950674的博客
12-17 1万+
element tabs 取更多参数
vue-组件基础
m0_53614495的博客
09-19 469
vue组件中相关的基础概念
react 动态添加组件属性_「React 基础」关于组件属性（props）与状态（state）的入门介绍...
weixin_42552124的博客
02-11 1247
大家好，在上一篇文章里，我们一起学习了如何创建第一个 React 组件，我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件，但是还有更多关于组件的内容值得我们去深入学习。本篇文章，我将和大家一起复习下如何使用组件的属性(props)与状态(state)。如何使用组件的属性(props)和其它应用程序一样，组件应具备重用性。接下来我们将基于上一节的例子，分别创建以下组件：头部组件(...
Taro 多端开发积累
m0_37148591的博客
09-22 332
日常积累，欢迎指正 正文 1、组件 props 中不能包含属性名为 id 的属性 报错信息： id在小程序是保留关键字，请使用其他 props 名 体现：子组件中不能正常获取到预期的 id 属性值 错误写法 <Card title={item.title} id={id} /> 正确写法 <Card title={item.title} itemId={id} /> 2、持续更新… ...
13.Vue - ref属性、props配置、mixin混入、插件、scoped样式
weixin_51351637的博客
09-08 945
1.被用来给元素或子组件注册引用信息（id的替代者）2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）3.使用方式：打标识： .... 或获取：this.$refs.xxx具体看下图代码。
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
m0_54088431的博客
09-04 892
组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
vue的props为只读
wangatong的博客
12-23 890
父组件调用 <child my-message="hello!"></child> 子组件调用 props: ['myMessage'] props: { myMessage:{ type: Number, required: true } } fooMessage: { type: Number, default:
props只读性
舍予
08-03 187
组件无论是使用函数声明还是通过class声明，都觉不能修改自身的props. 他有一个严格的规则： 所有的React组件都必须向纯函数一样保护他们的props不被更改。
vue/no-mutating-props
最新发布
03-16
vue/no-mutating-props是Vue.js的一个ESLint规则，用于防止在子组件中直接修改父组件传递的props属性。这是因为Vue.js的单向数据流原则，父组件传递给子组件的props应该是只读的，子组件不应该直接修改它们。如果需要修改props属性，应该通过触发事件来通知父组件进行修改。这样可以避免不必要的副作用和数据混乱。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值