是否在呈现的HTML中保留有关React组件的语义信息？

Question

在较新的Angular中，使用过的组件的标签/名称保留在输出的HTML中：

<Invoice>
  <div class="itemlist">
    <InvoiceItem>
       <span>...</span>       <span>...</span>       <span>...</span>
    </InvoiceItem>
    <InvoiceItem>
       <span>...</span>       <span>...</span>       <span>...</span>
    </InvoiceItem>
  </div>
</Invoice>

但是在React中，该信息被删除了，只留下了div和spans，无法告诉哪个组件在哪里结束。

  <div class="itemlist">
       <span>...</span>       <span>...</span>       <span>...</span>
       <span>...</span>       <span>...</span>       <span>...</span>
  </div>

有没有一种方法可以以标签或data- *属性的形式恢复此信息？

（我正在使用React / webpack / Typescript / Selenium。）

编辑：我很好，必须添加一些东西到构建管道来实现这一目标。 特别是由于类名在缩小过程中被弄乱了，因此无论如何都可能需要它。 除非React / ReactDOM像AngularJS这样的地方已经有解决方案，而Angular4 +总是这样？

Answer 1

到目前为止，我找到的最接近的解决方案是https://github.com/Igorbek/typescript-plugin-styled-components ，它是为styled-components而不是React的常用组件执行此操作的。

它不适用于我们的构建过程-克隆后我什至无法得到它来编译自己的示例-但这是我的目标。