React 组件中的内联 SVG 未显示

Question

我在 React 功能组件中有一个 svg：

import React, { useEffect } from 'react';

import './logo.css';

function Logo({}) {


    const logo = () => (
        <svg width="130" height="144" viewBox="0 0 130 144">
            <path
                d="M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
                fill="white"
            />
        </svg>
    );

    return { logo };
}

export default Logo;

正确导入并在另一个组件中使用时，这不会显示任何内容。我在其他组件中有其他内联 svgs 可以正常工作。

我尝试在 Illustrator 中编辑 svgs，但无论我如何保存或导出，在内联时结果都与 React 不兼容。这是一个在 Illustrator 中创建的 svg 路径示例，它不能在 React 中内联工作：

<path d="M103.42,120.08l-6.66-6.25a32.92,32.92,0,0,0,3.39-9.06l8.15,4.1A40.69,40.69,0,0,1,103.42,120.08Z"/>

内联 React svg 的语法要求是什么？动态更改 svg 属性并使用 GSAP 制作动画真的很有用，但如果 svgs 不能可靠地工作，我不能这样做吗？

Answer 1

应该是return logo();。因为这里的 logo 是一个函数，你需要像 logo();

一样调用它

只调用return logo是行不通的，这里logo是函数不是变量。所以调用函数的正确语法是 function_name 后跟 ().

检查 stackblitz 实现 Stackblitz link

function Logo({}) {
  const logo = () => ( <svg width = "130"
    height = "144"
    viewBox = "0 0 130 144" >
    <path d = "M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
    fill = "red" /
    >
    </svg>
  );

  return logo();
}

Answer 2

您必须在 Logo return 语句中调用徽标。如果您 return 只是代码中的徽标引用，那么它将不是有效的 React 组件。

function Logo() {
  const logo = () => (
    <svg width="130" height="144" viewBox="0 0 130 144">
      <path
        d="M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
        fill="white"
      />
    </svg>
  );

  return logo();
}

svg 确实存在，但需要一些样式：https://codesandbox.io/s/heuristic-newton-m6js9

React 组件中的内联 SVG 未显示

Inline SVGs in React components not showing

reactjs

svg

adobe-illustrator