文档章节

react 判断实例类型

球球
 球球
发布于 06/19 12:46
字数 665
阅读 7
收藏 0
点赞 0
评论 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
博文 212
码字总数 52574
作品 0
石景山
程序员
React特性精华

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

科研者
2017/10/07
0
0
【React教学】通用型DataTable组件——400行内

其实严格意义来说,应该将Pagination(分页处理)和数据加载(AjaxLoad)作为一个独立的组件来处理,不过为了方便展示,就一股脑都做在这个Table里面了。 目前只实现到整个Table的数据加载,...

曾建凯
2016/05/20
607
1
React混淆知识摘录

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

sunshinewyf
2016/10/10
23
0
React基本概念(二)

1.组件的生命周期 实例化: 实例初次被创建,首次渲染时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同。 在首次使用一个组件类时,下面方法依次调用顺序: --getDef...

Turnsole1
2017/11/27
0
0
React源码学习——ReactClass

前言 之前一直在使用react做开发,但是对其内部的工作机制却一点儿都不了解,说白了就是一直在套api,毫无成就感。趁最近比较闲,对源码做了一番研究,并通过博客的方式做一些记录。 进入正题...

技术小胖子
2017/11/26
0
0
React16——看看setState过程中fiber干了什么事情

目的 通过观察调用栈和其他博客的介绍亲身体验下setState过程中fiber干了什么事情 1、create-react-app创建一个demo 下图是一个典型的create-react-app创建的项目,其中Text.js是我新增的子组...

二丶月
05/18
0
0
React 基础实例教程

一、基本使用 1. 同一页面中使用 首先,需要核心库react.js与React的DOM操作组件react-dom.js 其次,如果需要在当前HTML页面中直接写react的代码,就要引入browser.js文件,用于解析相关的J...

张涛泽
2017/04/19
0
0
React Fiber 浅窥

React Fiber 浅窥 decltype2017-10-277 阅读 React 本文内容参考 https://github.com/facebook/react v16.0.0 版本源码。 如 React 实际行为与本文有出入,以 react repo 的 master 分支提交...

decltype
2017/10/27
0
0
React.js深入学习详细解析

目录: 一、JSX介绍 二、React组件生命周期详解 三、属性、状态的含义和用法 四、React中事件的用法 五、组件的协同使用 六、React中的双向绑定 一、JSX介绍 ①定义 JSX=JavaScript XML,是一...

LuckyWinty
2016/03/23
246
0
[译] 深入 React 高阶组件

原文: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e 概要 本文面向想要探索 HOC 模式的进阶用户,如果你是 React 的初学者则应该从官方文档开始。...

江米小枣tonylua
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ConcurrentLinkedQueue源码分析

前言 ConcurrentLinkedQueue是一个线程安全的队列,它采用的是 CAS 算法来进行实现,也就是说它是非阻塞的;队列中的元素按照 FIFO(先进先出)的原则对元素进行排列,此外,它是一个无界队列;...

tsmyk0715
9分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
21分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
23分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
33分钟前
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
35分钟前
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
48分钟前
0
0
press.one个人数字签名

这是我在press.one的数字签名 https://press.one/p/address/v?s=9d3d5b7ce019af357ab994775549e8f047a5b17fc9893364652fc67e4b95443b38ccb24c6655e0d252dd0154369eb9b7717c4ccf4e1835ca3596......

NateHuang
51分钟前
1
0
Oracle 中的 SQL 分页查询原理和方法详解

本文分析并介绍 Oracle 中的分页查找的方法。 Oracle 中的表,除了我们建表时设计的各个字段,其实还有两个字段(此处只介绍2个),分别是 ROWID(行标示符)和 ROWNUM(行号),即使我们使用...

举个_栗子
56分钟前
4
2
C++ iostream、iomanip 头文件详解

大家好,我是ChungZH!这是我的第二篇博客。在这篇博客中,我将介绍一些有关C++的iostream和iomanip库的知识,希望大家喜欢! 首先,我们来看看iostream。 相信大家都知道iostream,这个库可以...

ChungZH
今天
1
0
atom的摸索

atom中使用git 软件有提示,不赘述(软件的特色) 提供的只是些基础功能,我们需要伟大的开源伙伴来解决易用性问题 ,安装git plus插件,你就可以不用cli也可以在atom中畅快的使用git了 因为这玩意...

狮子狗
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部