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

【问题标题】：How to turn on the 'throwIfNamespace' flag in React.js如何在 React.js 中打开“throwIfNamespace”标志
【发布时间】：2020-03-27 01:14:21
【问题描述】：

我的组件中有如下代码。

<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”标志？

【问题讨论】：

我用于像 xmlns:xlink 这样的属性，在将 svg 导出为 react 组件时尝试使用 xmlnsXlink。

标签： reactjs svg xml-namespaces javascript-namespaces

【解决方案1】：

使用驼峰式表示法。尝试此代码。因为这个 xmlns:xlink 语法反应不知道如何编译这个，你得到了错误。

&lt;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%;"&gt;

【讨论】：

这太棒了！欣赏如此简单的解决方案！我也必须将xlink:href 替换为xlinkHref。
这不能回答问题，如果使用您无法控制的提供的 SVG 也无济于事。

【解决方案2】：

throwIfNamespace 是@babel/preset-react 的一个选项，或者更具体地说是@babel/plugin-transform-react-jsx。有关将 throwIfNamespace 设置为 false 的示例配置文件以及有关该选项的更多信息，请参阅 this page on the babeljs site。

为方便起见，此处提供以下文件的示例：

index.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
});

【讨论】：

【解决方案3】：

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

您可以看到两个 SVG 内容之间的区别。 正确的是图片底部的那个。

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

参考：Github Issue

【讨论】：

这并不是真正的修复。您刚刚删除了导致错误的 XML 属性...您仍然需要它们。
不是一个有效的解决方案，因为这无济于事，所有的 svg 都不能以这种方式简化
另一种解决方案是使用 camelCase ex:

【解决方案4】：

使用了 CodePen 的一些动画，也遇到了同样的问题。就像之前建议的那样，我把 xml 部分变成了 camelCase 并且不得不将样式放在大括号中。

Image of not working and fixed code

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 引起更多的关注。
哦，对不起。当我从 CodePen 使用和 svg 时，我遇到了同样的错误。我没有回答这个问题，但我给出了如何摆脱错误的解决方案。

【解决方案5】：

正确使用属性：

而不是class写className
在style 中使用骆驼符号

并在括号中添加样式

className={`name`}
    style={{
                stroke: "none",
                strokeWidth: 4,
                strokeDasharray: "none",
                strokeLinecap: "butt",
                strokeLinejoin: "miter",
                strokeMiterlimit: 10,
                fill: "#99CC33",
                fillRule: "nonzero",
                opacity: 1,
              }}

【讨论】：

【解决方案6】：

它之所以有效，是因为您没有可能希望稍后使用的 def（您需要它们来避免代码重复）。

【讨论】：