無法將SVG發送到我的反應組件出現錯誤

我正在嘗試添加一個 SVG 檔案，但我收到一個錯誤 tat 說：

Compiled with problems:X

ERROR

[eslint] 
src/svg/banner.jsx
  Line 15:2:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:2)

這是svg：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
  >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>

我正在嘗試像這樣匯入它：

import { ReactComponent as Logo } from "../svg/banner.svg";

我也嘗試像這樣匯入它：

import banner from "../svg/banner.svg";

但它不起作用......有什么想法嗎？

使用反應和脈輪 UI

uj5u.com熱心網友回復：

如果要將 SVG 設定為反應組件，則應回傳一個元素。（您可以為此使用反應片段<> /* ...HTML code */ </>）

export default function Svg() {
   return (
     <>
       <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
    <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
    >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>
     </>
   
   )

}

uj5u.com熱心網友回復：

React期望 svg 元素也遵循 JSX 語法，即屬性和屬性的 Camel-Casing，就像 CSS 屬性在 JSX 中與 Camel-Casing 的使用方式一樣。

解決方案：
xmlns:xlink將其轉換為xmlnsXlink并請讓我知道這是否解決了您的問題。并且需要為具有破折號的屬性應用相同的駱駝套管-

如果匯出多個組件時出錯，則用一個父組件的反應片段包裝它
您需要從組件中匯出一個元素，這里有兩個父元素。您可以將整個 svg 包裝到反應片段中，如下所示：

<> 
    <svg>
    <svg/> 

    <svg> 
    <svg/> 
</>

uj5u.com熱心網友回復：

JSX 元素必須被包裹在一個封閉的標簽中但是你的組件它沒有被包裹。您可以使用Fragments將所有節點分組svg tags，而無需將節點添加到 DOM 嘗試如下：

<>  // shorter syntax you can use for declaring fragments
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
  >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>
</>

標籤：反应 svg

上一篇：直方圖顯示不正確

下一篇：如何以快速選擇器選單樣式調整影像大小