文档章节

react 判断实例类型

球球
 球球
发布于 06/19 12:46
字数 665
阅读 83
收藏 0

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。

这里附上一个讲的很全面的文章:

https://www.cnblogs.com/onepixel/p/5126046.html

typeof运算符

首先说一下typeof,它是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。基本数据类型是可以判断的,但是对象就只能到object,无法区分具体的function name或者说是class name。

if(typeof 'hello' == 'string'){
  console.log("true")
}

instanceof运算符

原文地址:https://www.cnblogs.com/SourceKing/p/5766210.html

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

instanceof的普通的用法,obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。

Person的原型在p的原型链中

function Person(){};
var p =new Person();
console.log(p instanceof Person);//true

总结:用一个方法模拟instanceof的判断逻辑

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 这里重点:当 O 严格等于 A 时,返回 true
            return true;
        A = A.__proto__;
    }
}

经过debug,发现react的一个组件并不能通过这种方式判断。具体放到继承那边去讲吧。

React.Children.map+elementType 

通过学习其他组件的代码,看到有这样写的

React.Children.map(this.props.children, element => {
            if (!element) {
              return null;
            }

            const { elementType } = element.type;
            if (elementType !== 'YourClass' ) {
              return null;
            }
            ...
          })

需要在自己的类里面添加一个常量(捂脸)

 static elementType = 'YourClass';

 

this.props.children.type.name

最后我用的是这种方式

this.props.children&&!Array.isArray(this.props.children)&&this.props.children.type.name == 'YourClass'

如果需要在props属性列表中限制类型,可以看这个文档:

http://www.css88.com/react/docs/typechecking-with-proptypes.html

------------------------------

2018.6.26 补充

今天build了一下,上面那个方法type.name拿不到正确的值了.....尴尬......用回第三种方法。

于是决定还是好好研究一下原理吧。。。(捂脸)

原理嘛, 一个是es6 里static 关键字,还有一个重点,敲黑板,Flowtype ,官网文档在这里

https://flow.org/en/docs/react/

 

 

© 著作权归作者所有

共有 人打赏支持
球球
粉丝 3
博文 217
码字总数 53214
作品 0
石景山
程序员
私信 提问
React特性精华

以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性的字典,方便大家查阅; 目录 内容 1. 性能优化 虽然 props 由React本身设置以及 st...

科研者
2017/10/07
0
0
React源码分析(一)-调用ReactDOM.render后发生了什么

所谓知其然还要知其所以然. 本系列文章将分析 React 15-stable的部分源码, 包括组件初始渲染的过程、组件更新的过程等. 这篇文章先介绍组件初始渲染的过程的几个重要概念, 包括大致过程、创建...

大灰狼的小绵羊哥哥
10/15
0
0
React源码分析(二)-组件的初始渲染

原文http://realtcg.com/2018/03/17/react-source-code-analysis-2-initial-render/ 上一篇文章讲到了React 调用首次渲染组件的前几个过程的源码, 包括创建元素、根据元素实例化对应组件, 利...

大灰狼的小绵羊哥哥
10/15
0
0
TypeScript 在 React 中使用总结

TypeScript 是 JS 类型的超集,并支持了泛型、类型、命名空间、枚举等特性,弥补了 JS 在大型应用开发中的不足,那么当 TypeScript 与 React 一起使用会碰撞出怎样的火花呢?接下来让我们一起...

花生毛豆
09/27
0
0
React混淆知识摘录

react是Facebook内部的一个JavaScript类库,已于2013年开源。 react的生命周期 一个实例初次被创建时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同,当你首次使用一个...

sunshinewyf
2016/10/10
23
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式锁的实现

redis实现分布式锁 方法1:普通实现方案 实现方式: 使用指令: set key 随机值 ex 5 nx.意思是当key不存在的时候设置key. 如果key存在返回OK,否则返回nil. 实现过程: 1.执行命令set key true ...

grace_233
28分钟前
1
0
解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡。 资源无法加载 [imgupload] ( Uncaught E...

Eller
31分钟前
0
0
限制php解析、user_agent、php相关配置

11月20日任务 11.28 限定某个目录禁止解析php 11.29 限制user_agent 11.30/11.31 php相关配置 11.28、限定某个目录禁止解析php 核心配置文件内容 <Directory /data/wwwroot/www.123.com/upl...

zgxlinux
36分钟前
1
0
博客园首页新随笔联系订阅管理 随笔

注解Annotation实现原理与自定义注解例子 什么是注解? 对于很多初次接触的开发者来说应该都有这个疑问?Annontation是Java5开始引入的新特征,中文名称叫注解。它提供了一种安全的类似注释的...

onedotdot
53分钟前
4
1
Spring boot + redis 用RedisTemlate实现简单的String key value 操作

springboot集成redis, 简单的key, value缓存操作. 1. application-local.properties # redis on local#spring.redis.port=6379#spring.redis.host=localhost#spring.redis.password=......

园领T
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部