相关疑难解决方法(0)

我有一个组件,它接受:itemName并吐出一个包含图像的html包.每个图像的图像都不同.

这就是我所拥有的:

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import SVGInline from "react-svg-inline";

export default (props) => (
  <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> {React.createElement(SVGInline, {svg: props.itemName})} </NavLink>
)

我怎么能让这个组件工作？

我知道,如果我只是明确地导入了我的所有图像,我可以像这样调用我的图像......

import SVGInline from "react-svg-inline";
import SASSSVG from "./images/sass.svg";

<NavLink className="hex" activeClassName="active" to="/hex/sass"><SVGInline svg={ SASSSVG } /></NavLink>

这可行,但由于我需要包含~60 svgs,它会增加大量的多余代码.

另外,我在这个问题中找到了这段代码......

import * as IconID from './icons';

但这似乎不起作用(这是问题的一部分,而不是答案),而答案对于回答我提出的问题来说有点过于特殊.

我也发现了这个问题,但是又有一个答案(虽然未经批准),它有更多的问题而不是答案.因此,在安装react-svg后,我设置了一个测试,看看答案是否正常工作......

import React, { Component } from 'react';
import ReactDOM from …

我有一个函数，它接受一些参数并呈现一个 SVG。我想根据传递给函数的名称动态导入该 svg。它看起来像这样：

import React from 'react';

export default async ({name, size = 16, color = '#000'}) => {
  const Icon = await import(/* webpackMode: "eager" */ `./icons/${name}.svg`);
  return <Icon width={size} height={size} fill={color} />;
};

根据动态导入的webpack 文档和神奇的注释“eager”：

“不生成额外的块。所有模块都包含在当前块中，并且不会发出额外的网络请求。仍然返回一个 Promise，但已经解决了。与静态导入相比，模块在调用导入之前不会执行() 制成。”

这就是我的图标解决的问题：

> Module
default: "static/media/antenna.11b95602.svg"
__esModule: true
Symbol(Symbol.toStringTag): "Module"

试图以我的函数试图给我这个错误的方式呈现它：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我不明白如何使用这个导入的 Module …