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;

在正确导入并在另一个组件中使用后，此操作不会显示任何内容。我在其他工作正常的组件中还有其他内嵌svg。

我尝试在Illustrator中编辑svg，无论我如何保存或导出，内联时结果都不与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 svgs的语法要求是什么？动态更改svg属性并使用GSAP设置动画非常有用，但是如果svg无法可靠运行，我将无法执行此操作？

Answer 1

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

那样调用它

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

export default Logo;

Answer 2

您必须在徽标返回语句中调用徽标。

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