Question

我什至不知道如何称呼这个问题，所以下面是一个简短的解释。

在使用 React v16.13.1 和 @blueprintjs/core 3.15.1 的相对复杂的 SPA 中，我在渲染时遇到警告：

Warning: The tag <path> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
  in path (created by InnerReference)
  in Blueprint3.ResizeSensor (created by InnerReference)
  in InnerReference (created by Context.Consumer)
  in Reference (created by Blueprint3.Popover)
  in span (created by Blueprint3.Popover)
  in Manager (created by Blueprint3.Popover)
  in Blueprint3.Popover (created by ProductSelectionWithUsage)
  in div (created by Blueprint3.FormGroup)
  ...

我尝试将断点放在 react-dom.development.js 中显示此消息的位置并四处查看，试图推断出哪个组件造成了这种糟糕的 DOM 布局。我还检测了几种内部反应方法来打印出有趣的信息：

function createElement(type, props, rootContainerElement, parentNamespace) {
    console.log(`::: createElement ${type} in NS ${parentNamespace}`);
    ...

从那以后，我注意到 svg path 标签之前在不同的地方成功渲染，直到它到达这个地方。在所有成功案例中，parentNamespace 都正确设置为 http://www.w3.org/2000/svg；在失败的情况下，它是 http://www.w3.org/1999/xhtml。我浏览了 props 参数和调用函数的内容，看到这个 path 元素的父组件是一些 span 元素，它本身源自 Blueprint.Popover ...

那么问题是，有没有更实用的方法来获得这个失败元素所在的反应组件层次结构？我错过了什么？

附言疯狂的事情，尽管发出了可怕的警告，但应用程序中似乎没有任何问题。

跟踪 React v16 渲染警告

0 个答案: