4

我的项目文件夹中有以下结构：

src
  |
   -> assets
     |
      -> general-icons
        |
         pointer-arrow.svg
  |
   -> components
     |
      -> lazy-loader
        |
         LazyLoader.tsx

LazyLoader 是一个功能性反应组件，我在其中动态导入一个组件，在这种情况下是一个 svg 文件

import React from 'react';

export default function LazyLoader(path: string) {
  return React.lazy(() => import(path));
}

'path' 属性是一个字符串，其中包含 svg 文件的相对路径：

src/assets/general-icons/pointer-arrow.svg

而pointer.svg是一个普通的svg：

<svg version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>

当我调用将路径作为参数传递的 LazyLoader 组件时，它会给出一个错误，因为它找不到 svg 模块：

Error: Cannot find module 'src/assets/general-icons/pointer-arrow.svg'

有人有什么想法吗？

4

2 回答 2

2

默认情况下，绝对导入路径不起作用。您的应用程序是否使用 create-react-app 引导？在项目的根目录下创建一个 jsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

assets/general-icons/pointer-arrow.svg现在您可以从应用程序中的任何位置导入。

于 2020-06-28T20:27:04.173 回答
-1

我会把所有的svgs放在一个函数中。

import React from "react";

export const Logo = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 27" {...props}>
    <path
      d="M112.2,9.6h-0.6v7....z"
    />
  </svg>
);

export const menu...

然后根据需要导入它们。

于 2020-06-28T20:51:10.173 回答