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

Question

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

cMethod

但是在React中，该信息被删除了，仅保留了div和spans，无法分辨哪个组件在何处结束。

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

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

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

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

Answer 1

到目前为止，我发现的最接近的解决方案是https://github.com/Igorbek/typescript-plugin-styled-components，它是针对styled-components进行的，而不是React的常规组件。

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