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

Answer 1

使用驼峰命名法。 试试 这段代码。由于这个 xmlns:xlink 语法反应不知道如何编译这个。

<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

。有关将 throwIfNamespace 设置为 false 的示例配置文件以及有关该选项的更多信息，请参阅 babeljs 站点上的

此页面

。

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

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

Answer 3

我找到了解决这个问题的方法。 在我的例子中，我不得不删除 SVG 图像中所有不必要的命名空间，它开始作为反应组件工作。

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

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

参考：Github 问题

Answer 4

正确使用属性：

• 代替

  class

  写

  className

• 在

  style

  中使用骆驼符号

• 并在括号中添加样式

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

Answer 5

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

Answer 6

正如最佳答案所建议的那样，您需要将 svg 转换为 jsx 格式。
为此，您可以使用这两个工具。
https://svg2jsx.com/（将 svg 转换为 react 组件）
https://www.svgminify.com/（将 svg 转换为 jsx 格式）