如何在 React.js 中打开“throwIfNamespace”标志

Question

我的组件中有一些如下所示的代码。

<svg id="SvgjsSvg3254" width="318" height="152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">

我收到如下错误

Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

如何打开“throwIfNamespace”标志？

Answer 1

使用驼峰命名法。 试试这个代码。由于此xmlns:xlink语法 react 不知道如何编译它，因此您会收到错误消息。

<svg id="SvgjsSvg3254" width="318" height="152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsSvgjs="http://svgjs.dev/svgjs" class="apexcharts-svg" xmlnsData="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">

Answer 2

throwIfNamespace是 的一个选项@babel/preset-react，或者更具体地说，是 的一个选项@babel/plugin-transform-react-jsx。请参阅babeljs 站点上的此页面，获取设置throwIfNamespace为 false 的示例配置文件以及有关该选项的更多信息。

为了方便起见，这里使用以下文件作为示例：

索引.js

<element ns:attr />

.babelrc 具有默认的 throwIfNamespace (true)

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx"
    ]
  ]
}

产生类似于您所看到的结果：

$ npx babel index.js 
SyntaxError: /tmp/throw-if-namespace/index.js: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
> 1 | <element ns:attr />

.babelrc，其中 throwIfNamespace 设置为 false

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx", {
        "throwIfNamespace": false
      }
    ]
  ]
}

不会产生任何错误

$ npx babel index.js 
/*#__PURE__*/
React.createElement("element", {
  "ns:attr": true
});

Answer 3

我找到了这个问题的解决方案。就我而言，我必须删除 SVG 图像中所有不必要的命名空间，然后它开始作为 React 组件工作。

您可以看到两个 SVG 内容之间的差异。 正确的是图像底部的那个。

或者您可以通过此链接上传并解析您的数据：此处

参考：Github 问题