Question

我想将HTML代码从一个单独的文件导入到React组件文件中。为此，我尝试将其导出到单独的文件中：

export const icon = () => {
  return (
    <svg width="62px" height="62px" viewBox="0 0 62 62">
      <path d="M7.75,33.5833333 L28.4166667,33.5833333 L28.4166667,7.75 L7.75,7.75 L7.75,33.5833333 Z M7.75,54.25 L28.4166667,54.25 L28.4166667,38.75 L7.75,38.75 L7.75,54.25 Z M33.5833333,54.25 L54.25,54.25 L54.25,28.4166667 L33.5833333,28.4166667 L33.5833333,54.25 Z M33.5833333,7.75 L33.5833333,23.25 L54.25,23.25 L54.25,7.75 L33.5833333,7.75 Z" id="path-1" fill="green" />
    </svg>
  );
};

然后在我要导入的组件文件（基于类的组件）中：

import { icon } from './../layouts/icons';

然后在render方法（在return内部）中，我只是做：

{icon}

但这不起作用。有什么提示吗？

Answer 1

这是SFC-无状态功能组件。要使其正常工作，只需调用它即可：

{icon()}

或用作JSX标签：

import { icon as Icon } from './../layouts/icons';

<Icon />

Answer 2

我经常在React中使用这样的SVG。您基本上已经在那里。在导出和导入中将“ icon”大写，然后像在任何其他组件中一样在render方法中使用它。

import { Icon } from '../../layouts/icons'

render() {
  return <Icon />
}

需要注意的一个问题是，当将SVG用作这样的React组件时，您需要确保SVG文件中的属性符合JSX要求（基本上删除连字符和驼峰式属性名）。

即strokeWidth代替stroke-width等

Answer 3

如果将某些内容导出为函数，则应调用它：

type GetProp<T, K extends keyof any> = T extends Record<K, infer V> ? V : never;

，但实际上您不需要为单个条目进行导出。借助webpack的加载程序系统，您可以将整个文件作为字符串导入：

{icon()}

您只需要配置svg-inli-loader 用于import icon from '../icon.svg'; ... {icon}在webpack配置中，例如：

*.svg

[UPD] raw-loader是实现相同目的的更直接方法-它不会进行任何清理，只是将文件的内容作为字符串返回

在React中以jsx格式从另一个文件导入html

3 个答案: