Question

如果您转到Instaram并打开控制台，您会看到data-reactid属性中使用了单词

data-reactid=".0.1.0.1:$mostRecent:0.0.$0.$1036585483152156993.0.2"

自己看看。他们是怎么做到的？为什么会这样？

有什么想法吗？

Answer 1

这是因为key属性。

动态创建子组件时，可以通过set key属性唯一标识子组件。在渲染到DOM中之后，该值将在所述元素的data-reactid属性中可见：

data-reactid=".0.1.$something"

something实际上是key属性的值。

假设您有一个Queue和一个QueueItem组件。 Queue组件将包含queueData数组，并使用render()方法，您可以使用QueueItem动态创建key个组件属性：

// QueueItem component.
render: function () {
  return (
    <li>
      { this.props.name }
    </li>
  );
}

// Queue component.
render: function () {
  return (
    <ul className="queue-data">
      {
        this.state.queueData.map(queueItem => <QueueItem key={ 'most-recent-' + queueItem.id } />)
      }
    </ul>
  );
}

这将产生以下标记：

<ul class="queue-data" data-reactid=".0.1">
  <li data-reactid=".0.1.$most-recent-1">one</li>
  <li data-reactid=".0.1.$most-recent-2">two</li>
  <li data-reactid=".0.1.$most-recent-3">three</li>
</ul>

有关动态儿童的更多信息，请访问here

ReactJS data-reactid在Instagram源代码中有单词

1 个答案: