react中巧妙使用动态解构属性
发布日期:2021-05-20 10:06:45 浏览次数:30 分类:技术文章

本文共 691 字,大约阅读时间需要 2 分钟。

1、使用过ESLint插件的都知道,在Vscode中,如果你取值不用解构的方式,它就会建议你使用解构赋值。

2、在项目中,我最常用的就是对象解构的最常用方式。
3、这种写法非常基本,所有的取值都可以这样写。就这样,最简单的写出了符合react官方建议的写法和符合ESLint规范。

从this.state、this.props中取值
const listType = this.state.listType; // 一般写法 const {
listType,fileList,downloadTitle } = this.state; const {
dispatch, registrationId } = this.props;

4、

解构动态属性

对象解构中使用变量,可方便取值赋值操作。

在 []中写变量值

const {
[listType]: {
infoList } } = this.props;

应用场景也很简单能想到,

  • 你可以根据情况的控制变量,控制你的infoList从哪里去取值,可以实现更复杂的场景。
    dispatch中同样可以这样使用
const {
keyword, typeId, state, listType } = this.state; dispatch({
type: `${
listType}/getApplicationPageList`, payload: {
.......

6、才疏学浅,简单分享。如有不当的地方请指正。

在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_45416217/article/details/108417805 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:flex布局怎么实现宽度自适应?
下一篇:Git rebase(变基)操作

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月29日 14时15分50秒