类型 '() => void' 不可分配给类型 'string'答案

【问题标题】：Type '() => void' is not assignable to type 'string'类型 '() => void' 不可分配给类型 'string'
【发布时间】：2019-05-12 12:26:54
【问题描述】：

我在 Typescript 中遇到问题，我试图了解如何在 ItemProps{} 中声明 src={close}。我收到以下错误：

Type '() => void' 不能分配给 type 'string'。

很遗憾，我不知道如何解决这个错误。

import * as React from 'react';
import close from '../../assets/close.svg';

export type ItemProps = { 
    /**
     * Close icon source
     */
    src: any;
}

错误发生在src={close}

<img className={styles.close} src={close} alt=''/> //src={close} is 'close.svg'

感谢任何帮助！谢谢。

【问题讨论】：

你在哪里定义close？显然它不是一个字符串，而是一个函数。
什么意思？它应该是<img src=''>的图标
堆栈跟踪指示其他内容，因此我要问。
你能提供一个带有close声明的sn-p吗？是用import close from '../close.svg'; 之类的 webpack 魔法导入的吗？
什么是../../assets/close？一个反应组件？一个 SVG 文件？还有什么？

标签： javascript reactjs typescript

【解决方案1】：

() => void 表示close 是返回void 的function 类型，但src 属性需要string 类型的值。确保 close 实际上是 string，或者返回 string 的函数。

编辑： 我对react了解不多，但显然加载svg图像并不容易，你可以看看这个article

【讨论】：

src={'close'} 你的意思是，这样吗？ @米卡
我使用的是 React JS，而不是 Angular。 ;)
如果您可以将填写 close 的代码添加到您的帖子中，那将有所帮助。
对不起，我以为我在 angular 标签上，但这是打字稿的欢呼
感谢@mika 的文章

【解决方案2】：

如果它在运行时实际上是 string，而你只是想让 TypeScript 停止对你大喊大叫，你只需要修正你的打字：

declare module '*.svg' {
  const value: string;
  export default value;
}

这将告诉 TypeScript 每个导入的 *.svg 文件都会导出一个 string。上面的声明应该放在你项目某处的声明文件中（例如：stubs.d.ts）。

【讨论】：

【解决方案3】：

<img className={styles.close} src={require('../../assets/close.svg')} alt=''/>

应该做的工作！ Import 将尝试作为函数导入。使用 require 可以指定文件路径。

【讨论】：

似乎是一个不错的解决方案，但我收到以下错误：Cannot find name 'require'. Do you need to install type definitions for node? 我已经尝试过这个const close = require('../../assets/close.svg') 在反应导入后@Spencer Robertson

【解决方案4】：

好的，正如 OP 所要求的，这是将任何 SVG 文件转换为 React 组件的方法。这使您可以更好地控制 SVG，甚至可以对其进行动画处理（即 react-popmotion、react-animated 等）或根据状态更新路径。另一个很酷的好处是，这样你不需要任何 webpack/gulp/grunt/anything 插件来内联 SVG，因为它们是由 React 本身内联的；）。

首先，打开您的 SVG 文件，复制代码。然后，在components/icons/CheckboxIcon.js 或类似文件中创建一个新文件。

这是我为工作项目制作的 CheckBoxIcon 示例：

import React from 'react'
import PropTypes from 'prop-types'

const CheckBoxIcon = props => (
  <svg
    style={{ width: 24, height: 24 }}
    viewBox={'0 0 24 24'}
    onClick={props.onClick}
  >
    <path
      fill={props.checked ? '#1E82E4' : 'rgba(0,0,0,.67)'}
      d={
        props.checked
          ? 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Zs'
          : 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'
      }
    />
  </svg>
)

CheckBoxIcon.propTypes = {
  checked: PropTypes.bool,
  onClick: PropTypes.func
}

CheckBoxIcon.defaultProps = {
  checked: false,
  onClick: () => null
}

export default CheckBoxIcon

然后将其作为常规 React 组件导入，即：

import CheckBoxIcon from '../icons/CheckBoxIcon';

render () {
  return (
    <div>
      {/* My components... */}
      <CheckBoxIcon />
      <CheckBoxIcon checked={true} />
    </div>
  )
}

有关更多信息，请随时查看 dev.to 上的这篇文章：https://dev.to/nishanbajracharya/using-svg-icons-components-in-react-163k

【讨论】：