PropTypes.element和PropTypes.node的区别

PropTypes.element:指React Element,即React.CreateElement生成的元素,React.CreateElement可以用jsx语法糖表示:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译后为:

React.createElement(
  MyButton,
  {color: ‘blue‘, shadowSize: 2},
  ‘Click Me‘
)

因此PropTypes.element可以为以下类型:string | 组件实列(组件标签,例如上面的<MyButtom>)

PropTypes.node:指React Node,任何可被渲染的元素,包括ReactChild | ReactFragment | ReactPortal | 字符串 | 数字 | 布尔值 | null | undefined | 数组;

摘自大神的回答:

Quote @ferdaber: A more technical explanation is that a valid React node is not the same thing as what is returned by React.createElement. Regardless of what a component ends up rendering, React.createElement always returns an object, which is the JSX.Element interface, but React.ReactNode is the set of all possible return values of a component.

  • JSX.Element -> Return value of React.createElement
  • React.ReactNode -> Return value of a component

原文地址:https://www.cnblogs.com/94pm/p/11688918.html

时间: 2024-11-05 23:29:22

PropTypes.element和PropTypes.node的区别的相关文章

元素Element与节点Node的区别、联系

1. 节点包括:元素节点.属性节点.文本节点等,所以元素Element只是节点Node的一个子项. 2. 元素包含属性.内容. 3. 元素一定是节点,但节点不一定是元素,它还可能是属性节点和文本节点等. var elementNode = document.getElementById('div1'); // 元素节点 var attrNode = document.getElementById('div1').getAttributeNode('name'); // 属性节点 var text

JavaScript中Element与Node的区别,children与childNodes的区别

关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 更多节点类型参考:https://developer.m

Elasticsearch master node、 data node、 client node的区别与各自特点

es集群里的master node.data node和client node到底是怎么个意思,分别有何特点? master节点 主要功能是维护元数据,管理集群各个节点的状态,数据的导入和查询都不会走master节点,所以master节点的压力相对较小,因此master节点的内存分配也可以相对少些:但是master节点是最重要的,如果master节点挂了或者发生脑裂了,你的元数据就会发生混乱,那样你集群里的全部数据可能会发生丢失,所以一定要保证master节点的稳定性. data node 是负

【06】react 之 PropsType

React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行. React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.object React.PropTypes.string React.PropTypes.symbol React.PropTypes.nod

Java生成和解析XML格式文件和字符串的实例代码

1.基础知识:Java解析XML一般有四种方法:DOM.SAX.JDOM.DOM4J. 2.使用介绍1).DOM(1)简介 由W3C(org.w3c.dom)提供的接口,它将整个XML文档读入内存,构建一个DOM树来对各个节点(Node)进行操作.优点就是整个文档都一直在内存中,我们可以随时访问任何节点,并且对树的遍历也是比较熟悉的操作:缺点则是耗内存,并且必须等到所有的文档都读入内存才能进行处理. (2)示例代码: 1.基础知识:Java解析XML一般有四种方法:DOM.SAX.JDOM.DO

框架源码深入需要准备的知识之解析XML

1.DOM解析XML DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder(); Document document = documentBuilder.parse(new FileInputStream(file)); 得到的D

html中的元素和节点

元素(Element)和结点(Node)的区别, 元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如<div>...</div>. 但是一个结点不一定是一个元素,而一个元素一定是一个结点. 什么是node: NODE是相对TREE这种数据结构而言的.TREE就是由NODE组成.这个部分你可以参考离散数学的树图. node有几个子类型: Element, Text, Attribute,  RootElement, Comment, Namespace等

07.React组件进阶(二)Props 深入

props 校验 //1.对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据 //2.如果传入的数据格式不对,可能会导致组件内部报错 //3.关键问题:组件的使用者不知道明确的错误原因 //4.props 校验:允许在创建组件的时候,就指定props的类型,格式等 App.propTypes = { colors:PropTypes.array } //5.作用:捕获使用组件时因为props 导致的错误,给出明确的错误提示,增加组件的健壮性 使用步骤 1.安装包 prop-t

解析XML文档时Node和Element的区别

文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口,它使得用户对HTML有了空前的访问能力,并使开发者能将HTML作为XML文档来处理. 使用C++的TinyXML解析XML文档时,会有两套方法,一套操作Node,一套操作Element. Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素Element 1