reacttypescript访问定义不存在的属性或者变量(代码片段)

胖鹅68 胖鹅68     2023-01-14     237

关键词:

一、文章参考

  1. react-slick Previous and Next methods
  2. react官网——Refs and the DOM

二、问题一:如何让编译机能监听到 props和state定义的interface

2.1 问题说明

在自己写的React项目中,定义了一个基类 BaseComponent,自己定义的所有类都要继承该类,实现统一管理某些“公共方法”的目的,由于BaseComponent 是一个使用 typescript 编写的,而且编译器检测 props 和 state 的值,是需要将inteface 是放到 React.Component 中的,有与中间隔了一个 BaseComponent ,这样就导致编译器无法检测具体业务组件需要传递的Props 和 State 的interface了

2.2. 解决办法 —— 使用泛型传递特性

  1. 定义好 “基础类”
import React,  Component  from 'react'

export default class BaseComponent<P, S> extends Component<P, S> 
  constructor (props: P) 
    super(props)
  

  // 获取用户对象
  getUserInfo (isGoLoginPage = true) 
    const props: any = this.props
    const userinfoStr = ''
    // 如果没有该字段,则返回null
    if (userinfoStr) 
      return JSON.parse(userinfoStr)
     else 
      if (isGoLoginPage) 
        props.history.push('/login')
      
      return null
    
  

  1. 业务类继承 “基础类”
import React from 'react'
// 直接引入scss文件,转为了css
import AsyncComponent from '@/core/AsyncComponent'
import BaseComponent from '@/core/BaseComponent'
import  Iprops  from '@/model'
const CommonPanelWrap = AsyncComponent(() => require('../child/CommonPanelWrap'))

interface Istate 
  panelType: string

class LoginPage extends BaseComponent<Iprops, Istate> 
  constructor (props: Iprops) 
    super(props)
    this.state = 
      panelType: 'login' // 面板的状态 login  scan  findpwd1  findpwd2
    
  

  render () 
    const  panelType  = this.state
    return (
      <CommonPanelWrap key=panelType>
        aaaaa
      </CommonPanelWrap>
    )
  


export default LoginPage

二、问题二:在“基类”中去调用ts没有定义的属性

import React,  Component  from 'react'

export default class BaseComponent<P, S> extends Component<P, S> 
  constructor (props: P) 
    super(props)
  

  // 获取用户对象
  getUserInfo (isGoLoginPage = true) 
    // 定义一个变量 props: any ,欺骗编译器
    const props: any = this.props
    const userinfoStr = ''
    // 如果没有该字段,则返回null
    if (userinfoStr) 
      return JSON.parse(userinfoStr)
     else 
      if (isGoLoginPage) 
        // 后面就可以访问对应的属性和方法了
        props.history.push('/login')
      
      return null
    
  

使用 React Typescript 的状态:类型'IntrinsicAttributes & IntrinsicClassAttributes 上不存在属性

】使用ReactTypescript的状态:类型\\\'IntrinsicAttributes&IntrinsicClassAttributes上不存在属性【英文标题】:StateusingReactTypescript:Propertydoesnotexistontype\'IntrinsicAttributes&IntrinsicClassAttributes使用ReactTypescript的状态:类型\'Intr 查看详情

自定义属性访问(代码片段)

__getattr__属性什么时候触发:当我们访问属性的时候,如果属性不存在,则触发此方法;classMyTest:def__getattr__(self,item):#当访问的属性不存在时,该方法会被触发print("触发__getattr__属性")super().__getattribute__(item)mt=MyTest()mt.name执行结... 查看详情

React Typescript - 添加自定义属性

】ReactTypescript-添加自定义属性【英文标题】:ReactTypescript-Addingcustomattribute【发布时间】:2019-07-1901:37:51【问题描述】:ReactTypescript允许添加自定义data-*属性。但是是否可以添加自定义属性,例如“名称”||“测试”行为。?<spa... 查看详情

VueJS:编译器错误状态数据属性在通过此属性访问时不存在

】VueJS:编译器错误状态数据属性在通过此属性访问时不存在【英文标题】:VueJS:Compilererrorstatesdatapropertydoesn\'texistwhenaccessviathisproperty【发布时间】:2020-11-0613:25:33【问题描述】:我遇到的问题似乎只是我的编译器的问题。它不... 查看详情

javascript原型

...的属性。2.如果对象身上存在和原型一样的属性名称,在访问对象属性。会访问到对象的属性。如果让问对象身上不存在的属性,那么将会为去原型上查找。3.原型的增删改查询给对象一个不存在属性赋值 查看详情

当我尝试访问不存在的属性时,为啥 javascript 不会引发类型错误? [复制]

】当我尝试访问不存在的属性时,为啥javascript不会引发类型错误?[复制]【英文标题】:WhydidjavascriptNOTthrowtypeerrorwhenItrytoaccessapropertythatdoesnotexist?[duplicate]当我尝试访问不存在的属性时,为什么javascript不会引发类型错误?[复制]... 查看详情

节点模块导出,访问不存在的属性错误,Jasmine

】节点模块导出,访问不存在的属性错误,Jasmine【英文标题】:nodemoduleexports,Accessingnon-existentpropertyerror,Jasmine【发布时间】:2021-09-2919:51:18【问题描述】:我正在使用客户的遗留代码,它是一个用于Jasmine测试的node.js项目。我的... 查看详情

在循环依赖中访问模块导出的不存在的属性“padLevels”

】在循环依赖中访问模块导出的不存在的属性“padLevels”【英文标题】:Accessingnon-existentproperty\'padLevels\'ofmoduleexportsinsidecirculardependency【发布时间】:2021-02-1902:59:49【问题描述】:我只是&gt;npmi-gphonegap@9.0.0和&gt;phonegap--versi... 查看详情

错误:警告:在循环依赖中访问模块导出的不存在属性“findOne”

】错误:警告:在循环依赖中访问模块导出的不存在属性“findOne”【英文标题】:Error:Warning:Accessingnon-existentproperty\'findOne\'ofmoduleexportsinsidecirculardependency【发布时间】:2021-03-2811:47:38【问题描述】:这是我的代码,我不明白为... 查看详情

TypeScript 令人困惑的错误'对象可能是'未定义'和'类型上不存在属性'长度''

】TypeScript令人困惑的错误\\\'对象可能是\\\'未定义\\\'和\\\'类型上不存在属性\\\'长度\\\'\\\'【英文标题】:TypeScriptconfusingerrors\'Objectispossibly\'undefined\'&\'Property\'length\'doesnotexistontype\'TypeScript令人困惑的错误\'对象可能是\'未定义... 查看详情

React Typescript:第 0 行:解析错误:无法读取未定义的属性“名称”

】ReactTypescript:第0行:解析错误:无法读取未定义的属性“名称”【英文标题】:ReactTypescript:Line0:Parsingerror:Cannotreadproperty\'name\'ofundefined【发布时间】:2020-06-2822:28:43【问题描述】:今天突然我开始在使用Typescript构建的项目中... 查看详情

React Typescript 从 Spring Data REST API 获取“属性'_embedded'不存在”问题

】ReactTypescript从SpringDataRESTAPI获取“属性\\\'_embedded\\\'不存在”问题【英文标题】:ReactTypescriptfetchfromSpringDataRESTAPI"Property\'_embedded\'doesnotexist"issueReactTypescript从SpringDataRESTAPI获取“属性\'_embedded\'不存在”问题【发布 查看详情

(节点:15867)警告:在循环依赖中访问模块导出的不存在属性“cat”

】(节点:15867)警告:在循环依赖中访问模块导出的不存在属性“cat”【英文标题】:(node:15867)Warning:Accessingnon-existentproperty\'cat\'ofmoduleexportsinsidecirculardependency【发布时间】:2021-08-2122:58:43【问题描述】:每当我打开/保存任何... 查看详情

Yeoman - 在循环依赖中访问模块导出的不存在属性____

】Yeoman-在循环依赖中访问模块导出的不存在属性____【英文标题】:Yeoman-Accessingnon-existentproperty____ofmoduleexportsinsidecirculardependency【发布时间】:2021-02-1318:53:06【问题描述】:哟!我正在尝试yeoman,我正在制作一个测试生成器,但... 查看详情

eui库-10-使用自定义组件

...优化掉,在运行时并不存在。3.属性的getter方法内要判断访问的对象是否为空,确保外部任何情况下访问属性都不会报错。4组件构造函数参数必须为空,或者参数有默认值,否则无法用空构造函数实 查看详情

Nuxt/TypeScript:无法访问 - TS2339:类型上不存在属性“XXX”

】Nuxt/TypeScript:无法访问-TS2339:类型上不存在属性“XXX”【英文标题】:Nuxt/TypeScript:Cannotaccessthis-TS2339:Property\'XXX\'doesnotexistontype【发布时间】:2021-03-2408:25:28【问题描述】:我在使用带有TypeScript的Nuxt.js时遇到问题。在我的项... 查看详情

访问链接属性未定义的影片剪辑

】访问链接属性未定义的影片剪辑【英文标题】:Accessingmovieclipswithlinkagepropertygettingundefined【发布时间】:2012-06-0710:34:55【问题描述】:这仅在Windows中发生,在osxflash播放器中不发生。对于我使用链接通过动作脚本添加的库中的... 查看详情

在访问 Asp.Net 中的 key 属性时出现“'object'不包含'key'的定义”的错误

】在访问Asp.Net中的key属性时出现“\\\'object\\\'不包含\\\'key\\\'的定义”的错误【英文标题】:Gettingerrorthat"\'object\'doesnotcontainadefinitionfor\'key\'"whileaccessingthekeypropertyinAsp.Net在访问Asp.Net中的key属性时出现“\'object\'不包含\'key\... 查看详情