精华内容
下载资源
问答
  • 这令我费解,它props本身有什么关系吗?这种定义方式常规定义有什么不同吗? 根据我理解,正常定义函数组件时,形式应如下图所示: 翻阅React文档后,只找到下面这句话问题有些相关: 函数组件接收唯一带...

    在学习React的过程中,用函数定义组件时,碰到了下面这种情况。函数组件的参数不为props,而是{aaa,bbb}这样的形式,并且这个定义的方式是正确的。这令我费解,它和props本身有什么关系吗?这种定义方式和常规定义有什么不同吗?
    在这里插入图片描述

    根据我的理解,正常定义函数组件时,形式应如下图所示:
    在这里插入图片描述

    翻阅React文档后,只找到下面这句话和问题有些相关:

    函数组件接收唯一带有数据的 “props”(代表属性)对象,并返回一个 React 元素

    根据前半句话,我的猜测是这样的:

    因为函数组件只能接收一个参数props,且props为对象,而{name,title}刚好是一个对象,故必然和props有联系。所以我猜测,props 事实上就是 {name,title} ,props的结构很可能是这样的

    props = {
    	name: "xxx",
    	title: "yyy"
    }
    

    而且{props.name}的效果等价于直接使用{name},也能佐证这一点。

    一番思索之后,我越发觉得我的想法是正确的。正欣喜若狂之际,突然灵机一动,我为什么不能直接console.log(props)看一看呢?

    结果发现:
    在这里插入图片描述
    没毛病,今天又是傻虎虎的一天。

    ——————————————————————

    原理解释

    emmm,不好意思,耽误大家时间了。在我后来的学习中,我意识到了这只是ES6的语法,特来更新一波。
    事实上,这里运用了ES6的对象解构赋值方法。简单举个例子

    let { name,title } = {aaa:"aaa", name:"Sara", title:"world", bbb:"bbb", ... }
    

    此时,左边的name和title会被正确赋值为"Sara"和"world"。

    props其实就是一个有很多属性的对象。在function Book 的声明过程中,参数设置为了一个对象{ name, title },这是形参,而外部传递过来的props是一个实参。在调用函数的过程中,实参会赋值给形参,即{ name, title } = props。那么,name和title就被正确赋值了。

    这么写的作用

    1. 在声明函数的过程中,函数的参数有哪些变得清晰可见。把参数写成prop或者写成{ name, title }这样的形式,明显右边更明了
    2. 在函数体内调用参数的时候也更方便。如果参数为props,要这样调用:props.name;而写成{ name, title }形式的话,直接调用name即可。
    展开全文
  • JS中的id和name之间的区别和使用分析

    千次阅读 2016-04-25 15:29:35
    在开发工程中遇到了id和name的基础概念问题,但是作为傻白甜的我却不是很理解他们之间的区别和联系。 JS中web页面元素的调用可以有两种识别方法:id和name,特地总结一下: 1. 使用范围 出BASE,HEAD,HTML,META,...

    在开发工程中遇到了id和name的基础概念问题,但是作为傻白甜的我却不是很理解他们之间的区别和联系。

    JS中web页面元素的调用可以有两种识别方法:id和name,特地总结一下:

    1. 使用范围

    出BASE,HEAD,HTML,META,SCRIPT,STYLE,TITLE标签外,id都可用。

    name只用于APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META(name6有时有自己的用途)

    name 用于 form 内元素,提交需要
    id 用于 form 外元素好用因为 DOM 能直接取得单一元素
    document.getElementByIdx_xx_x_x(“id_Number”) 得到的是单个元素
    document.getElementsByName(“name”) 得到的是数组

    注:元素的获取方式

    取得 id :document.getElementByIdx_xx_x_x(“idname”)

    取得 name : document.getElementsByName(“name”)[0?1?2?3?....]
    表单元素 (form input textarea select) 与框架元素 (iframe frame) 用 name

    这些元素都与表单 ( 框架元素作用于 form 的 target) 提交有关 , 在表单的接收页面只

    接收有 name 的元素 , 赋 ID 的元素通过表单是接收不到值的
    Name 其实要复杂的多,因为 Name 有很多种的用途,所以它并不能完全由 ID 来代替,从而将其取消掉。

      具体用途有:

      用途 1: 作为可与服务器交互数据的 HTML 元素的服务器端的标示,比如 input 、 select 、 textarea 、和 button 等。我们可以在服务器端根据其 Name 通过 Request.Params 取得元素提交的值。

      用途 2: HTML 元素 Input type=’radio’ 分组,我们知道 radio button 控件在同一个分组类, check 操作是 mutex 的,同一时间只能选中一个 radio ,这个分组就是根据相同的 Name 属性来实现的。

      用途 3: 建立页面中的锚点,我们知道 link 是获得一个页面超级链接,如果不用 href 属性,而改用 Name ,如: ,我们就获得了一个页面锚点。

      用途 4: 作为对象的 Identity ,如 Applet 、 Object 、 Embed 等元素。比如在 Applet 对象实例中,我们将使用其 Name 来引用该对象。

      用途 5: 在 IMG 元素和 MAP 元素之间关联的时候,如果要定义 IMG 的热点区域,需要使用其属性 usemap ,使 usemap=”#name”( 被关联的 MAP 元素的 Name) 。

      用途 6: 某些特定元素的属性,如 attribute ,和 param 。例如为 Object 定义参数。

    2. 唯一性区别
    有些标签,可以同时有name和id.
    id 就像身分证号,是唯一的, name 就像姓名一样可以同名
    在一个HTML网页中,id是唯一的,即只有某一个标签,或某一个块的标识符是这个id.
    而当有多个name时,系统自动使同name归为数组

      赋 name: document.formName.inputName    document.frames(“frameName”) 

      赋 ID  : document.all.inputID           document.all.frameID

    在通用的情况下:
    NAME.属性
    document.NAME.属性
    document.getElementsByName(‘NAME’)
    ID.属性
    document.ID.属性
    document.getElementByIdx_xx_x_x(‘ID).属性

    展开全文
  • tagName和nodeName的区别

    2019-10-04 19:29:22
    首先介绍DOM里常见三种节点...,其中h2是元素节点,class是属性节点,head是文本节点,在这里你可以说 h2这个元素节点包含一个属性节点一个文本节点。其实几乎所有HTML标签都是元素节点,而id, title, class...

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,在这里你可以说 h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点,而id, title, class等则是属性节点,而元素所包含的文本内容则是文本节点。

    tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。下面是nodeName在不同节点上的值:

    InterfacenodeNamenodeValueattributes
    Attr name of attribute value of attribute null
    CDATASection #cdata-section content of the CDATA Section null
    Comment #comment content of the comment null
    Document #document null null
    DocumentFragment #document-fragment null null
    DocumentType document type name null null
    Element tag name null NamedNodeMap
    Entity entity name null null
    EntityReference name of entity referenced null null
    Notation notation name null null
    ProcessingInstruction target entire content excluding the target null
    Text #text content of the text node null

    而tagName只有在元素节点上才会有值。

    从DOM层次来看,nodeName是node 接口上的property,而tagName是element 接口上的property,所有的节点(元素节点,属性节点,文本节点等12种)都继承了node接口,而只有元素节点才继承了element节点,因此nodeName比tagName具有更大的使用范围。

    总结:tagName只能用在元素节点上,而nodeName可以用在任何节点上,可以说nodeName涵盖了tagName,并且具有更多的功能,因此建议总是使用nodeName。

    转载于:https://www.cnblogs.com/lvbing/archive/2012/05/15/2502192.html

    展开全文
  • html标签中id和name的区别

    千次阅读 2007-07-27 00:56:00
    id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的,"现代化"一点,用的范围广一点. 中的name原来(刚发明时)就是用于本页揿一下转向过去用的. 除 BASE, HEAD, HTML, ...
    id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的,"现代化"一点,用的范围广一点. <A..> 中的name原来(刚发明时)就是用于本页揿一下转向过去用的.

    除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 标签外,id 都可用.

    name只用于APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META. (name有时有自己的用途)

    table 中 name 无定义, 应当用 id.

    有些标签,可以同时有name和id.

    在一个HTML网页中,id是唯一的,即只有某一个标签,或某一个块的标识符是这个id.

    id 在HTML中的作用:

    (1) 用id选择相应的style sheet(风格).
    (2) <A ..> 链接的目的地
    (3) 脚本语言用它找目的地(找该id的标签)
    (4) 作为名字,用于声明某OBJECT element
    (5) 作为一个标签或块的区分标致(用于从HTML网页中取出数据放入数据库或把HTML翻译成别的格式,等情况).

    (参考HTML 4.0 定义)
     
     
    细说HTML元素的ID和Name属性的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

    上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示,于是在input里加了个Name='SliceInfo',就一切ok了。

    第一段里对于ID和Name的解答说的太笼统了,当然那个解释对于ID来说是完全对的,它就是Client端HTML元素的Identity。而Name其实要复杂的多,因为Name有很多种的用途,所以它并不能完全由ID来代替,从而将其取消掉。具体用途有:

    用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
    用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。
    用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。
    用途4: 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。
    用途5: 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。
    用途6: 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

    显然这些用途都不是能简单的使用ID来代口
     
    展开全文
  • 自己在用的过程中总结一下id和name的使用区别。 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 标签外,id 都可用. name只用于APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,...
  • name id区别

    千次阅读 2009-11-18 01:19:00
    __________________________id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的,"现代化"一点,用的范围广一点. 中的name原来(刚发明时)就是用于本页揿一下转向过去用...
  • title author date CreateTime categories Roslyn NameSyntax 的 ToString ToFullString 的区别 lindexi 2018-11-19 15:22:23 +0800 2018-7-14 9:28:1 +0800 Ros...
  • javascript 中 tagName nodeName 的区别

    千次阅读 2013-06-14 21:14:36
    tagName只能在元素标签上使用,而nodeName则可以在所有节点上使用。 DOM中有12种节点类型,常见有三种:元素节点,属性节点以及文本节点。例如 class="title">head,其中h2是元素节点,class是属性节点,...
  • nodeName与tagName的区别

    千次阅读 2018-03-22 16:54:18
    原文链接:详情链接DOM里面一共有12种节点类型,...h1--元素节点 class---属性节点 head----文本节点在这里可以说成元素节点h1包含属性节点class文本节点head.其实,几乎所有html标签都是元素节点,而id ...
  • html中name和id区别

    2013-03-20 17:27:52
    id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的,"现代化"一点,用的范围广一点. 中的name原来(刚发明时)就是用于本页揿一下转向过去用的.  除 BASE, HEAD, ...
  • 适用范围 除base、head、html、script、meta、title标签外,id都可以用; name只适用于select、form、...HTML元素Input type='radio’分组,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现。 ...
  • title()用法:首字母大写 lower()用法:所有字母小写 upper()用法:所有字母大写 name = "ada lovelace" ...print(name.title()) print(name.upper()) print(name1.lower()) Ada Lovelace #2 title(...
  • document.getElementById/Name/TagName这三个可以取得元素,分别通过查询id、name和标签名。但他们返回值是有区别的。下面来看个简单例子: &lt;div id="myDiv" name="sb" class="...
  • tagName与nodeName的区别

    2017-03-09 17:53:00
    h2 class="title">head</h2>,其中h2是元素节点,class是属性节点, head是文本节点,在这里你可以说h2这个元素节点包含一个属性节点一个文本节点。其实几乎所有HTML标签都是元素节点, id, ...
  • varlet的区别

    2020-08-21 16:39:08
    ES5ES6中iffor是没有作用域,函数有作用域 例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • vue计算属性之watchcomputed的区别 1.computed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
  • forEachsome的区别

    2020-08-26 15:16:40
    <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
  • 求助varlet的区别

    2021-04-11 18:11:26
     HTML代码区域 <code class="language-html"><!DOCTYPE html> <html lang="...meta name=...title>.../title>...<p><strong>1....<p><strong>2.请问letvar的区别?</strong></p>  </p>
  • VueRouter的paramsquery的区别

    千次阅读 2018-11-27 15:08:52
    官方文档是路由一起写,我个人验证得到就算路由不进行配置,依旧能在下一个页面获取到param以及query参数 个人测试如下 在router.js配置路由 { path: '/submit',name:'submit',component: Submit,meta:...
  • table-layout属性fixedauto的区别

    万次阅读 2017-08-23 11:05:55
    定义: <!DOCTYPE html> <title>table-layout属性fixedauto的区别</title> <meta name="author" content="" /> h1{font-size:16px;font-family:Arial
  • 2021/3/15 getpost的区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
  • 需要跳转路由地址 { path: "/common", name: "Common", component: resolve => require(["../views/creative_competition/common/index.vue"], resolve), meta: { title: "创意大赛" ...
  • 话不多少,直接上代码 <!... <... <head>...meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> &l
  • <!... <... <head>...meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="f

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 172
精华内容 68
关键字:

title和name的区别