【问题标题】:what's data-reactid attribute in html?什么是 html 中的 data-reactid 属性?
【发布时间】:2013-07-09 06:38:42
【问题描述】:

当我浏览某些页面的 HTML 时,我注意到其中一些使用此属性“data-reactid”,例如:

 <a data-reactid="......" ></a>

那个属性是什么,它的作用是什么?

【问题讨论】:

  • data-reactidReact JavaScript library 使用的自定义属性。这是为与 Facebook 和 Instagram 一起使用而开发的。
  • 请注意,所有答案都在解释什么是自定义日期属性,而不是解释什么是 data-reactid。 react 使用它来引用带有 react 元素类实例的 dom 对象。
  • @adrianj98,你为什么不发表你的评论作为答案呢?
  • 想知道,如果 Facebook 使用 React,为什么我在他们的网站上找不到任何 data-reactid?

标签: javascript html reactjs


【解决方案1】:

数据属性通常用于各种交互。通常通过 javascript。它们不会影响有关站点行为的任何内容,并且可以作为出于任何需要的目的传递数据的便捷方法。这里有一篇文章可以解决问题:

http://ejohn.org/blog/html-5-data-attributes/

您可以通过在任何标准属性安全字符串(不含空格或特殊字符的字母数字)前添加 data- 前缀来创建数据属性。例如,data-id 或在本例中为 data-reactid

【讨论】:

    【解决方案2】:

    Custom Data attribute 在 HTML5 中

    想在我的回答中引用 Ian 的评论:

    它只是你可以使用的元素上的一个属性(一个有效的) 存储有关它的数据/信息。

    此代码稍后会在事件处理程序中检索它,并将其用于 找到目标输出元素。它有效地存储了类 应该输出其文本的 div。

    reactid 只是一个后缀,您可以在此处使用任何名称,例如:data-Ayman

    如果您想找到不同之处,请查看此SO answer and comment 中的小提琴。

    【讨论】:

    • 请注意,根据您提供的链接,您不能在属性名称中使用大写字母。
    • 是的,这个限制有点误导。 DOM 本身中的实际属性名称不能包含大写字母,但 HTML 标签中写出的属性可以,因为所有标签和属性名称在读取时都会自动小写。所以在 HTML 中你可以使用大写字母,但在 JS 中它会全部变为小写。 w3.org/TR/2010/WD-html5-20101019/…
    【解决方案3】:

    这就是 HTML 数据属性。 更多详情请参见:http://html5doctor.com/html5-custom-data-attributes/

    基本上,它只是您的自定义数据的容器,同时仍使 HTML 有效。 它是data- 加上一些唯一标识符。

    【讨论】:

      【解决方案4】:

      这是一个自定义的 html 属性,但在这种情况下可能由 Facebook React JS 库使用。

      看一看:http://facebook.github.io/react/

      【讨论】:

        【解决方案5】:

        data-reactid 属性是一个自定义属性,以便React 可以在 DOM 中唯一标识其组件。

        这很重要,因为 React 应用程序可以是 rendered at the server 以及客户端。 React 在内部构建了对构成应用程序的 DOM 节点的引用的表示(简化版本如下)。

        {
          id: '.1oqi7occu80',
          node: DivRef,
          children: [
            {
              id: '.1oqi7occu80.0',
              node: SpanRef,
              children: [
                {
                  id: '.1oqi7occu80.0.0',
                  node: InputRef,
                  children: []
                }
              ]
            }
          ]
        }
        

        没有办法在服务器和客户端之间共享实际的对象引用,并且发送整个组件树的序列化版本可能很昂贵。当应用程序在服务器端渲染并在客户端加载 React 时,它拥有的唯一数据是 data-reactid 属性。

        <div data-reactid='.loqi70ccu80'>
          <span data-reactid='.loqi70ccu80.0'>
            <input data-reactid='.loqi70ccu80.0' />
          </span>
        </div>
        

        它需要能够将其转换回上面的数据结构。这样做的方式是使用独特的 data-reactid 属性。这称为膨胀组件树。

        您可能还注意到,如果 React 在客户端呈现,它使用 data-reactid 属性,即使它不需要丢失其引用。在某些浏览器中,它会使用 .innerHTML 将您的应用程序插入到 DOM 中,然后它会立即扩充组件树,以提高性能。

        另一个有趣的区别是客户端渲染的 React id 将具有增量整数格式(如 .0.1.4.3),而服务器渲染的将带有随机字符串前缀(如 .loqi70ccu80.1.4.3)。这是因为应用程序可能会跨多个服务器呈现,并且没有冲突很重要。在客户端,只有一个渲染进程,这意味着可以使用计数器来确保唯一的 id。

        React 15 uses document.createElement instead,因此客户端呈现的标记将不再包含这些属性。

        【讨论】:

        • 这应该是公认的答案,因为它是唯一回答问题的答案。
        • 对于 React v15+:> data-reactid 仍然存在于服务器渲染的内容中,但是它比以前小得多,并且只是一个自动递增的计数器。
        • @RationalDev 啊,这很有趣。如果应用在多台服务器上渲染,如何解决冲突问题?
        • 我正在寻找最后一节,感谢您添加。我很困惑为什么我的客户端标记没有像以前那样包含它,但我的应用程序的另一部分确实包含它(它是在服务器上呈现的)。
        猜你喜欢
        • 2015-08-05
        • 2017-03-31
        • 1970-01-01
        • 1970-01-01
        • 2013-11-19
        • 2015-02-10
        • 1970-01-01
        • 2019-10-27
        • 2023-01-01
        相关资源
        最近更新 更多